[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.13 0.01 250); --foreground: oklch(0.98 0 0); --card: oklch(0.16 0.015 250); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.16 0.015 250); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.18 220); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.22 0.02 250); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.22 0.02 250); --muted-foreground: oklch(0.65 0.02 250); --accent: oklch(0.65 0.18 220); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.28 0.02 250); --input: oklch(0.22 0.02 250); --ring: oklch(0.65 0.18 220); --chart-1: oklch(0.65 0.18 220); --chart-2: oklch(0.7 0.15 160); --chart-3: oklch(0.75 0.12 80); --chart-4: oklch(0.6 0.2 300); --chart-5: oklch(0.65 0.2 25); --radius: 0.75rem; --sidebar: oklch(0.14 0.01 250); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.65 0.18 220); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.22 0.02 250); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.28 0.02 250); --sidebar-ring: oklch(0.65 0.18 220); --success: oklch(0.7 0.18 150); --success-foreground: oklch(0.15 0.02 150); --warning: oklch(0.75 0.15 80); --warning-foreground: oklch(0.15 0.02 80); } .dark { --background: oklch(0.13 0.01 250); --foreground: oklch(0.98 0 0); --card: oklch(0.16 0.015 250); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.16 0.015 250); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.18 220); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.22 0.02 250); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.22 0.02 250); --muted-foreground: oklch(0.65 0.02 250); --accent: oklch(0.65 0.18 220); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.28 0.02 250); --input: oklch(0.22 0.02 250); --ring: oklch(0.65 0.18 220); --chart-1: oklch(0.65 0.18 220); --chart-2: oklch(0.7 0.15 160); --chart-3: oklch(0.75 0.12 80); --chart-4: oklch(0.6 0.2 300); --chart-5: oklch(0.65 0.2 25); --sidebar: oklch(0.14 0.01 250); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.65 0.18 220); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.22 0.02 250); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.28 0.02 250); --sidebar-ring: oklch(0.65 0.18 220); --success: oklch(0.7 0.18 150); --success-foreground: oklch(0.15 0.02 150); --warning: oklch(0.75 0.15 80); --warning-foreground: oklch(0.15 0.02 80); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Travel Control', description: 'Take control of your spending while travelling abroad', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@ai-sdk/react": "3.0.41", "ai": "6.0.39" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="lib/travel-types.ts" isMerged="true" export interface Trip { id: string destination: string country: string countryCode: string startDate: string endDate: string status: "upcoming" | "active" | "completed" budget: number spent: number currency: string localCurrency: string exchangeRate: number transactions: Transaction[] imageUrl: string } export interface Transaction { id: string merchant: string category: TransactionCategory amount: number homeAmount: number date: string location: string hasReceipt: boolean receiptItems?: ReceiptItem[] } export interface ReceiptItem { name: string quantity: number price: number } export type TransactionCategory = | "food" | "transport" | "accommodation" | "shopping" | "entertainment" | "atm" | "health" | "other" import { UtensilsCrossed, Car, Hotel, ShoppingBag, Ticket, Banknote, Heart, Package, Type as type, LucideIcon } from "lucide-react" export const categoryIcons: Record = { food: UtensilsCrossed, transport: Car, accommodation: Hotel, shopping: ShoppingBag, entertainment: Ticket, atm: Banknote, health: Heart, other: Package, } export const categoryLabels: Record = { food: "Food & Dining", transport: "Transport", accommodation: "Accommodation", shopping: "Shopping", entertainment: "Entertainment", atm: "ATM Withdrawal", health: "Health & Pharmacy", other: "Other", } [V0_FILE]typescript:file="lib/mock-data.ts" isMerged="true" import type { Trip } from "./travel-types" export const mockTrips: Trip[] = [ { id: "1", destination: "Roma", country: "Italia", countryCode: "IT", startDate: "2026-01-15", endDate: "2026-01-22", status: "active", budget: 40000, spent: 16544, currency: "NOK", localCurrency: "EUR", exchangeRate: 11.42, imageUrl: "https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=800&q=80", transactions: [ { id: "t1", merchant: "Casa Capitano", category: "food", amount: 112.0, homeAmount: 1279, date: "2026-01-21", location: "Via Castel Morrone, 35, 20129 Milano MI, Italia", hasReceipt: true, }, { id: "t2", merchant: "Inter Restaurant", category: "food", amount: 65.5, homeAmount: 748, date: "2026-01-20", location: "Piazza Navona, 00186 Roma RM, Italia", hasReceipt: true, }, { id: "t3", merchant: "Trattoria Romana", category: "food", amount: 45.0, homeAmount: 514, date: "2026-01-19", location: "Via del Corso, 00187 Roma RM, Italia", hasReceipt: false, }, { id: "t4", merchant: "Caffè Greco", category: "food", amount: 18.5, homeAmount: 211, date: "2026-01-18", location: "Via Condotti, 86, 00187 Roma RM, Italia", hasReceipt: true, }, { id: "t5", merchant: "Pizzeria da Baffetto", category: "food", amount: 32.0, homeAmount: 365, date: "2026-01-18", location: "Via del Governo Vecchio, 114, 00186 Roma RM, Italia", hasReceipt: false, }, { id: "t6", merchant: "Taxi Roma", category: "transport", amount: 25.0, homeAmount: 286, date: "2026-01-21", location: "Fiumicino Airport, Roma, Italia", hasReceipt: true, }, { id: "t7", merchant: "Metro Roma - Line A", category: "transport", amount: 3.0, homeAmount: 34, date: "2026-01-20", location: "Termini Station, Roma, Italia", hasReceipt: false, }, { id: "t8", merchant: "Uber", category: "transport", amount: 18.5, homeAmount: 211, date: "2026-01-19", location: "Via Veneto, Roma RM, Italia", hasReceipt: true, }, { id: "t9", merchant: "Trenitalia", category: "transport", amount: 52.0, homeAmount: 594, date: "2026-01-17", location: "Roma Termini, Italia", hasReceipt: true, }, { id: "t10", merchant: "Hertz Rent a Car", category: "transport", amount: 145.0, homeAmount: 1656, date: "2026-01-16", location: "Via Marsala, 00185 Roma RM, Italia", hasReceipt: true, }, { id: "t11", merchant: "Zara Roma", category: "shopping", amount: 89.0, homeAmount: 1016, date: "2026-01-20", location: "Via del Corso, 189, 00187 Roma RM, Italia", hasReceipt: true, }, { id: "t12", merchant: "H&M", category: "shopping", amount: 65.0, homeAmount: 742, date: "2026-01-19", location: "Via Cola di Rienzo, 00192 Roma RM, Italia", hasReceipt: false, }, { id: "t13", merchant: "Feltrinelli Bookstore", category: "shopping", amount: 42.5, homeAmount: 485, date: "2026-01-18", location: "Largo Torre Argentina, 00186 Roma RM, Italia", hasReceipt: true, }, { id: "t14", merchant: "Colosseum Tickets", category: "entertainment", amount: 32.0, homeAmount: 365, date: "2026-01-19", location: "Piazza del Colosseo, 1, 00184 Roma RM, Italia", hasReceipt: true, }, { id: "t15", merchant: "Vatican Museums", category: "entertainment", amount: 25.0, homeAmount: 286, date: "2026-01-18", location: "Viale Vaticano, 00165 Roma RM, Italia", hasReceipt: true, }, { id: "t16", merchant: "Cinema Barberini", category: "entertainment", amount: 12.0, homeAmount: 137, date: "2026-01-17", location: "Piazza Barberini, 00187 Roma RM, Italia", hasReceipt: false, }, { id: "t17", merchant: "Hotel Artemide", category: "accommodation", amount: 245.0, homeAmount: 2798, date: "2026-01-16", location: "Via Nazionale, 22, 00184 Roma RM, Italia", hasReceipt: true, }, { id: "t18", merchant: "ATM Intesa Sanpaolo", category: "atm", amount: 200.0, homeAmount: 2284, date: "2026-01-16", location: "Via del Corso, 00187 Roma RM, Italia", hasReceipt: false, }, { id: "t19", merchant: "Pharmacy Loreto Gallo", category: "health", amount: 24.5, homeAmount: 280, date: "2026-01-19", location: "Via Nazionale, 228, 00184 Roma RM, Italia", hasReceipt: true, }, { id: "t20", merchant: "Eataly Roma", category: "food", amount: 78.0, homeAmount: 891, date: "2026-01-17", location: "Piazzale XII Ottobre 1492, 00154 Roma RM, Italia", hasReceipt: true, }, ], }, { id: "2", destination: "Paris", country: "France", countryCode: "FR", startDate: "2025-11-10", endDate: "2025-11-15", status: "completed", budget: 35000, spent: 28750, currency: "NOK", localCurrency: "EUR", exchangeRate: 11.35, imageUrl: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=800&q=80", transactions: [], }, { id: "3", destination: "Barcelona", country: "Spain", countryCode: "ES", startDate: "2025-08-20", endDate: "2025-08-27", status: "completed", budget: 45000, spent: 41200, currency: "NOK", localCurrency: "EUR", exchangeRate: 11.28, imageUrl: "https://images.unsplash.com/photo-1583422409516-2895a77efded?w=800&q=80", transactions: [], }, ] export const getActiveTrip = () => mockTrips.find((t) => t.status === "active") export const getCompletedTrips = () => mockTrips.filter((t) => t.status === "completed") export const getUpcomingTrips = () => mockTrips.filter((t) => t.status === "upcoming") [V0_FILE]typescriptreact:file="components/travel/receipts-screen.tsx" isMerged="true" "use client" import { useState } from "react" import type { Trip, Transaction } from "@/lib/travel-types" import { categoryIcons } from "@/lib/travel-types" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { ArrowLeft, Upload, Check, AlertCircle, Briefcase, User, Download, } from "lucide-react" interface ReceiptsScreenProps { trip: Trip onBack: () => void } export function ReceiptsScreen({ trip, onBack }: ReceiptsScreenProps) { const [filter, setFilter] = useState<"all" | "personal" | "business">("all") const filteredTransactions = trip.transactions.filter((tx) => { if (filter === "all") return true if (filter === "business") return tx.isBusinessExpense return !tx.isBusinessExpense }) const businessTransactions = trip.transactions.filter((tx) => tx.isBusinessExpense) const personalTransactions = trip.transactions.filter((tx) => !tx.isBusinessExpense) const withReceipt = trip.transactions.filter((tx) => tx.hasReceipt).length const withoutReceipt = trip.transactions.length - withReceipt return (

{/* Header */}

Receipts

{trip.destination}, {trip.country}

{/* Summary Cards */}

With receipt

{withReceipt}

Missing

{withoutReceipt}

{/* Filter Tabs */} setFilter(v as typeof filter)} className="w-full"> All ({trip.transactions.length}) Personal ({personalTransactions.length}) Business ({businessTransactions.length}) {/* Export Hint */} {filter === "business" && businessTransactions.length > 0 && (

Export these receipts for expense reimbursement from your employer.

)} {/* Transaction List */}

{filteredTransactions.map((tx) => ( ))}

{filteredTransactions.length === 0 && (

No transactions in this category

)}

) } function ReceiptRow({ transaction }: { transaction: Transaction }) { const [isBusinessExpense, setIsBusinessExpense] = useState(transaction.isBusinessExpense) const CategoryIcon = categoryIcons[transaction.category] return (

{transaction.merchantName}

{new Date(transaction.date).toLocaleDateString("no-NO", { day: "numeric", month: "short", })} · {transaction.time}

{transaction.homeAmount.toLocaleString("no-NO")} kr

{transaction.hasReceipt ? ( Receipt attached ) : ( )}

) } [V0_FILE]typescriptreact:file="components/travel/past-trips.tsx" isMerged="true" "use client" import type { Trip } from "@/lib/travel-types" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, MapPin, Calendar, ChevronRight, } from "lucide-react" interface PastTripsProps { trips: Trip[] onBack: () => void onSelectTrip: (trip: Trip) => void } export function PastTrips({ trips, onBack, onSelectTrip }: PastTripsProps) { return (

{/* Header */}

Past trips

{trips.length} trips completed

{trips.map((trip) => ( onSelectTrip(trip)} /> ))} {trips.length === 0 && (

No past trips yet

Your completed trips will appear here

)}

) } function TripCard({ trip, onClick }: { trip: Trip; onClick: () => void }) { const formattedStartDate = new Date(trip.startDate).toLocaleDateString("no-NO", { day: "numeric", month: "short", }) const formattedEndDate = new Date(trip.endDate).toLocaleDateString("no-NO", { day: "numeric", month: "short", year: "numeric", }) const budgetStatus = trip.spent <= trip.budget ? "under" : "over" return (

{/* Image */}

{/* Content */}

{trip.destination}

{trip.country}

{formattedStartDate} – {formattedEndDate}

{trip.spent.toLocaleString("no-NO")} kr

) } [V0_FILE]typescriptreact:file="components/travel/bottom-nav.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Home, Plane, CreditCard, BarChart3, Settings, User } from "lucide-react" interface BottomNavProps { activeTab: string onTabChange: (tab: string) => void } export function BottomNav({ activeTab, onTabChange }: BottomNavProps) { const tabs = [ { id: "home", icon: Home, label: "Home" }, { id: "travel", icon: Plane, label: "Travel" }, { id: "cards", icon: CreditCard, label: "Cards" }, { id: "insights", icon: BarChart3, label: "Insights" }, { id: "settings", icon: Settings, label: "Demo" }, ] return (

{tabs.map(({ id, icon: Icon, label }) => ( ))}

) } [V0_FILE]typescriptreact:file="components/travel/trip-summary.tsx" isMerged="true" "use client" import type { Trip } from "@/lib/travel-types" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { ArrowLeft, Download, Bookmark, MapPin, Calendar, CreditCard, TrendingDown, TrendingUp, } from "lucide-react" interface TripSummaryProps { trip: Trip onBack: () => void } export function TripSummary({ trip, onBack }: TripSummaryProps) { const budgetProgress = (trip.spent / trip.budget) * 100 const underBudget = trip.spent < trip.budget const difference = Math.abs(trip.budget - trip.spent) const formattedStartDate = new Date(trip.startDate).toLocaleDateString("no-NO", { day: "numeric", month: "short", }) const formattedEndDate = new Date(trip.endDate).toLocaleDateString("no-NO", { day: "numeric", month: "short", year: "numeric", }) // Calculate category totals const categoryTotals = trip.transactions.reduce( (acc, tx) => { acc[tx.category] = (acc[tx.category] || 0) + tx.homeAmount return acc }, {} as Record ) const sortedCategories = Object.entries(categoryTotals) .sort(([, a], [, b]) => b - a) .slice(0, 4) const totalSpent = trip.spent return (

{/* Header */}

Trip summary

{trip.destination}, {trip.country}

{/* Hero Summary Card */}

{trip.country}

{trip.destination}

{formattedStartDate} – {formattedEndDate}

{/* Budget vs Actual */}

Budget {trip.budget.toLocaleString("no-NO")} kr

Actual spend {trip.spent.toLocaleString("no-NO")} kr

{/* Difference Badge */}

{underBudget ? ( ) : ( )}

{underBudget ? "Under budget" : "Over budget"}

{underBudget ? "-" : "+"}{difference.toLocaleString("no-NO")} kr

{/* Stats Grid */}

Transactions

{trip.transactions.length}

Country

{/* Category Breakdown */}

Spending breakdown

{sortedCategories.map(([category, amount]) => { const percentage = Math.round((amount / totalSpent) * 100) return (

{category} {amount.toLocaleString("no-NO")} kr

) })}

{/* Actions */}

{/* Closing Message */}

Thanks for travelling with us

We hope you had a great trip to {trip.destination}

) } [V0_FILE]typescriptreact:file="components/travel/atm-map-view.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { X, MapPin, Navigation, Clock } from "lucide-react" import { LeafletMap } from "@/components/travel/leaflet-map" interface ATMLocation { id: string name: string address: string distance: string walkTime: string isOpen: boolean lat: number lng: number } interface ATMMapViewProps { destination: string onClose: () => void } // ATM locations near Piazza di Spagna, Roma const USER_LOCATION: [number, number] = [41.9058, 12.4823] const mockATMs: ATMLocation[] = [ { id: "1", name: "Bancomat BNL", address: "Via del Corso, 12", distance: "120m", walkTime: "2 min", isOpen: true, lat: 41.9068, lng: 12.4800, }, { id: "2", name: "Unicredit ATM", address: "Piazza di Spagna, 45", distance: "350m", walkTime: "5 min", isOpen: true, lat: 41.9060, lng: 12.4870, }, { id: "3", name: "Intesa Sanpaolo", address: "Via Condotti, 8", distance: "480m", walkTime: "7 min", isOpen: false, lat: 41.9040, lng: 12.4790, }, ] const mapMarkers = [ { lat: USER_LOCATION[0], lng: USER_LOCATION[1], isUser: true }, ...mockATMs.map((atm, i) => ({ lat: atm.lat, lng: atm.lng, label: String(i + 1), color: atm.isOpen ? "#22c55e" : "#6b7280", })), ] export function ATMMapView({ destination, onClose }: ATMMapViewProps) { return (

{/* Header */}

ATM nearby

{destination}

{/* Real Map */}

{/* Map legend */}

You

Open

Closed

{/* ATM List */}

{mockATMs.length} ATMs found

{mockATMs.map((atm, index) => ( ))}

) } function ATMListItem({ atm, index }: { atm: ATMLocation; index: number }) { return (

{index}

{atm.name}

{atm.isOpen ? ( Open ) : ( Closed )}

{atm.address}

{atm.distance}

{atm.walkTime}

) } [V0_FILE]typescriptreact:file="components/travel/travel-assistant.tsx" isMerged="true" "use client" import React from "react" import { useState, useRef, useEffect } from "react" import { useChat } from "@ai-sdk/react" import { DefaultChatTransport } from "ai" import type { Trip } from "@/lib/travel-types" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ArrowLeft, Send, Sparkles, Hotel, UtensilsCrossed, Landmark, CalendarDays, Loader2, Bot, User, ExternalLink, } from "lucide-react" function MarkdownRenderer({ text }: { text: string }) { const renderMarkdown = (md: string) => { const lines = md.split("\n") const elements: React.ReactNode[] = [] let i = 0 while (i < lines.length) { const line = lines[i] // Headers if (line.startsWith("### ")) { elements.push(

{renderInline(line.slice(4))}

) i++ continue } if (line.startsWith("## ")) { elements.push(

{renderInline(line.slice(3))}

) i++ continue } // Images: ![alt](url) const imgMatch = line.match(/^!\[([^\]]*)\]$([^)]+)$/) if (imgMatch) { elements.push(

) i++ continue } // Bullet points if (line.match(/^\s*[-*]\s/)) { const bulletText = line.replace(/^\s*[-*]\s/, "") elements.push(

{renderInline(bulletText)}

) i++ continue } // Numbered lists const numMatch = line.match(/^(\d+)\.\s(.+)/) if (numMatch) { elements.push(

{numMatch[1]}. {renderInline(numMatch[2])}

) i++ continue } // Empty line if (line.trim() === "") { elements.push(

) i++ continue } // Horizontal rule if (line.match(/^---+$/)) { elements.push(

) i++ continue } // Regular paragraph elements.push(

{renderInline(line)}

) i++ } return elements } const renderInline = (text: string): React.ReactNode[] => { const parts: React.ReactNode[] = [] // Process inline markdown: bold, links, inline images, inline code const regex = /(\*\*(.+?)\*\*)|(\[([^\]]+)\]$([^)]+)$)|(!\[([^\]]*)\]$([^)]+)$)|(`([^`]+)`)/g let lastIndex = 0 let match: RegExpExecArray | null const str = text while ((match = regex.exec(str)) !== null) { // Add text before match if (match.index > lastIndex) { parts.push(str.slice(lastIndex, match.index)) } if (match[1]) { // Bold parts.push({match[2]}) } else if (match[6]) { // Inline image parts.push( {match[7]}

) } else if (match[3]) { // Link parts.push( {match[4]} ) } else if (match[9]) { // Inline code parts.push( {match[10]} ) } lastIndex = match.index + match[0].length } if (lastIndex < str.length) { parts.push(str.slice(lastIndex)) } return parts.length > 0 ? parts : [str] } return

{renderMarkdown(text)}

} interface TravelAssistantProps { trip: Trip onBack: () => void } const quickActions = [ { icon: Hotel, label: "Hotels", prompt: "Suggest some hotels in my budget" }, { icon: UtensilsCrossed, label: "Restaurants", prompt: "What are the best local restaurants to try?" }, { icon: Landmark, label: "Attractions", prompt: "What are the must-see attractions?" }, { icon: CalendarDays, label: "Plan my day", prompt: "Help me plan a full day itinerary within my budget" }, ] export function TravelAssistant({ trip, onBack }: TravelAssistantProps) { const [input, setInput] = useState("") const messagesEndRef = useRef(null) const tripContext = { destination: trip.destination, country: trip.country, budget: trip.budget, spent: trip.spent, localCurrency: trip.localCurrency, startDate: trip.startDate, endDate: trip.endDate, } const { messages, sendMessage, status } = useChat({ transport: new DefaultChatTransport({ api: "/api/travel-assistant", body: { tripContext }, }), }) const isLoading = status === "streaming" || status === "submitted" const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!input.trim() || isLoading) return sendMessage({ text: input }) setInput("") } const handleQuickAction = (prompt: string) => { if (isLoading) return sendMessage({ text: prompt }) } return (

{/* Header */}

Travel Assistant

{trip.destination}, {trip.country}

{/* Messages */}

{messages.length === 0 ? (

AI Travel Assistant

Ask me about hotels, restaurants, attractions, or let me help you plan your days in {trip.destination}!

{/* Quick Actions */}

{quickActions.map((action) => ( ))}

{/* Budget Context Card */}

Your remaining budget

{(trip.budget - trip.spent).toLocaleString("no-NO")} NOK

~{Math.round((trip.budget - trip.spent) / trip.exchangeRate).toLocaleString("no-NO")} {trip.localCurrency}

) : ( <> {messages.map((message) => (

{message.role === "assistant" && (

)}

{message.parts.map((part, index) => { if (part.type === "text") { return message.role === "assistant" ? ( ) : (

{part.text}

) } return null })}

{message.role === "user" && (

)}

))} {isLoading && (

)}

{/* Input */}

) } [V0_FILE]typescriptreact:file="components/travel/demo-settings.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { ArrowLeft, CreditCard, Smartphone, MapPin, Plane, Radio, CheckCircle2, AlertCircle, Ticket, Loader2, Calendar, Clock, } from "lucide-react" import type { Trip } from "@/lib/travel-types" interface DemoSettingsProps { onBack: () => void onTriggerNewTravel: (trip: Trip, detectionMethod: string) => void } interface DetectionAlert { type: "visa" | "network" | "manual" | "booking" destination: string details: string itinerary?: BookingItinerary } interface BookingItinerary { pnr: string airline: string flights: { departure: string arrival: string departureCity: string arrivalCity: string flightNumber: string date: string }[] passengers: string[] } export interface CurrencyOption { code: string name: string symbol: string country: string rate: number } const cityCountryMap: Record = { Barcelona: { name: "Spain", code: "ES", currency: "EUR", imageUrl: "https://images.unsplash.com/photo-1583422409516-2895a77efded?w=800&q=80" }, London: { name: "United Kingdom", code: "GB", currency: "GBP", imageUrl: "https://images.unsplash.com/photo-1513635269975-3e91760cbb34?w=800&q=80" }, Paris: { name: "France", code: "FR", currency: "EUR", imageUrl: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=800&q=80" }, Rome: { name: "Italy", code: "IT", currency: "EUR", imageUrl: "https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=800&q=80" }, Stockholm: { name: "Sweden", code: "SE", currency: "SEK", imageUrl: "https://images.unsplash.com/photo-1509356843151-3e7d96241e11?w=800&q=80" }, Copenhagen: { name: "Denmark", code: "DK", currency: "DKK", imageUrl: "https://images.unsplash.com/photo-1513622470522-26c3c8a854bc?w=800&q=80" }, Amsterdam: { name: "Netherlands", code: "NL", currency: "EUR", imageUrl: "https://images.unsplash.com/photo-1534351590666-13e3e96b5017?w=800&q=80" }, Berlin: { name: "Germany", code: "DE", currency: "EUR", imageUrl: "https://images.unsplash.com/photo-1560969184561-8d4d0e62e6e9?w=800&q=80" }, New: { name: "United States", code: "US", currency: "USD", imageUrl: "https://images.unsplash.com/photo-1496442226666-85cb44e25828?w=800&q=80" }, Tokyo: { name: "Japan", code: "JP", currency: "JPY", imageUrl: "https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=800&q=80" }, Bangkok: { name: "Thailand", code: "TH", currency: "THB", imageUrl: "https://images.unsplash.com/photo-1508009603885-50cf7c579365?w=800&q=80" }, Madrid: { name: "Spain", code: "ES", currency: "EUR", imageUrl: "https://images.unsplash.com/photo-1539037116277-4db20889f2d4?w=800&q=80" }, Oslo: { name: "Norway", code: "NO", currency: "NOK", imageUrl: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?w=800&q=80" }, } const getCountryFromCity = (city: string): { name: string; code: string; currency: string; imageUrl: string } => { return cityCountryMap[city] || { name: "Unknown", code: "XX", currency: "XXX", imageUrl: "" } } export const currencyOptions: CurrencyOption[] = [ { code: "EUR", name: "Euro", symbol: "€", country: "Eurozone", rate: 11.42 }, { code: "USD", name: "US Dollar", symbol: "$", country: "United States", rate: 10.85 }, { code: "GBP", name: "British Pound", symbol: "£", country: "United Kingdom", rate: 13.52 }, { code: "SEK", name: "Swedish Krona", symbol: "kr", country: "Sweden", rate: 1.02 }, { code: "DKK", name: "Danish Krone", symbol: "kr", country: "Denmark", rate: 1.53 }, { code: "CHF", name: "Swiss Franc", symbol: "CHF", country: "Switzerland", rate: 12.15 }, { code: "JPY", name: "Japanese Yen", symbol: "¥", country: "Japan", rate: 0.072 }, { code: "THB", name: "Thai Baht", symbol: "฿", country: "Thailand", rate: 0.31 }, { code: "AUD", name: "Australian Dollar", symbol: "A$", country: "Australia", rate: 7.05 }, { code: "PLN", name: "Polish Zloty", symbol: "zł", country: "Poland", rate: 2.65 }, ] export function DemoSettings({ onBack, onTriggerNewTravel }: DemoSettingsProps) { const [activeAlert, setActiveAlert] = useState(null) const [manualDestination, setManualDestination] = useState("") const [manualCountry, setManualCountry] = useState("") const [bookingReference, setBookingReference] = useState("") const [isLoadingBooking, setIsLoadingBooking] = useState(false) const createTripFromDetection = ( destination: string, country: string, countryCode: string, currency: string, imageUrl: string ): Trip => { const today = new Date() const endDate = new Date(today) endDate.setDate(endDate.getDate() + 7) return { id: `demo-${Date.now()}`, destination, country, countryCode, startDate: today.toISOString().split("T")[0], endDate: endDate.toISOString().split("T")[0], status: "active", budget: 0, spent: 0, currency: "NOK", localCurrency: currency, exchangeRate: currency === "EUR" ? 11.42 : 1.0, imageUrl, transactions: [], } } const handleVisaTransaction = () => { setActiveAlert({ type: "visa", destination: "Stockholm", details: "Visa transaction detected: SAS Scandinavian Airlines (MCC 3000 - Airlines)", }) } const handleNetworkDetection = () => { setActiveAlert({ type: "network", destination: "Madrid", details: "Phone connected to foreign network: Movistar ES (Tower: Madrid Centro)", }) } const handleManualStart = () => { if (!manualDestination || !manualCountry) return setActiveAlert({ type: "manual", destination: manualDestination, details: `Manual trip started to ${manualDestination}, ${manualCountry}`, }) } const handleBookingLookup = async () => { if (!bookingReference || bookingReference.length < 5) return setIsLoadingBooking(true) // Simulate API call to Amadeus/Sabre/etc await new Promise(resolve => setTimeout(resolve, 1500)) // Mock booking data based on reference pattern const mockItineraries: Record = { "ABC123": { pnr: "ABC123", airline: "Norwegian", flights: [ { departure: "10:30", arrival: "12:45", departureCity: "Oslo (OSL)", arrivalCity: "Barcelona (BCN)", flightNumber: "DY1752", date: "2026-02-15", }, { departure: "18:20", arrival: "22:35", departureCity: "Barcelona (BCN)", arrivalCity: "Oslo (OSL)", flightNumber: "DY1753", date: "2026-02-22", }, ], passengers: ["Ola Nordmann"], }, "XYZ789": { pnr: "XYZ789", airline: "SAS", flights: [ { departure: "07:15", arrival: "09:30", departureCity: "Oslo (OSL)", arrivalCity: "London (LHR)", flightNumber: "SK805", date: "2026-03-10", }, { departure: "20:45", arrival: "23:55", departureCity: "London (LHR)", arrivalCity: "Oslo (OSL)", flightNumber: "SK806", date: "2026-03-14", }, ], passengers: ["Kari Hansen", "Per Hansen"], }, } // Use mock data or generate random itinerary const itinerary = mockItineraries[bookingReference.toUpperCase()] || { pnr: bookingReference.toUpperCase(), airline: "Wideroe", flights: [ { departure: "14:00", arrival: "17:30", departureCity: "Oslo (OSL)", arrivalCity: "Paris (CDG)", flightNumber: "WF4521", date: "2026-02-20", }, { departure: "19:00", arrival: "22:25", departureCity: "Paris (CDG)", arrivalCity: "Oslo (OSL)", flightNumber: "WF4522", date: "2026-02-27", }, ], passengers: ["Demo User"], } setIsLoadingBooking(false) const destination = itinerary.flights[0].arrivalCity.split(" ")[0] setActiveAlert({ type: "booking", destination, details: `Booking found: ${itinerary.airline} ${itinerary.flights[0].flightNumber}`, itinerary, }) } const confirmNewTravel = () => { if (!activeAlert) return let trip: Trip let detectionMethod: string switch (activeAlert.type) { case "visa": trip = createTripFromDetection( "Stockholm", "Sweden", "SE", "SEK", "https://images.unsplash.com/photo-1509356843151-3e7d96241e11?w=800&q=80" ) detectionMethod = "SAS Visa Transaction (MCC 3000)" break case "network": trip = createTripFromDetection( "Madrid", "Spain", "ES", "EUR", "https://images.unsplash.com/photo-1539037116277-4db20889f2d4?w=800&q=80" ) detectionMethod = "Phone Network Detection (Movistar ES)" break case "manual": trip = createTripFromDetection( manualDestination, manualCountry, manualCountry.slice(0, 2).toUpperCase(), "EUR", "https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=800&q=80" ) detectionMethod = "Manual Start" break case "booking": if (!activeAlert.itinerary) return const destCity = activeAlert.itinerary.flights[0].arrivalCity.split(" ")[0] const destCountry = getCountryFromCity(destCity) trip = createTripFromDetection( destCity, destCountry.name, destCountry.code, destCountry.currency, destCountry.imageUrl ) trip.startDate = activeAlert.itinerary.flights[0].date trip.endDate = activeAlert.itinerary.flights[activeAlert.itinerary.flights.length - 1].date detectionMethod = `Booking Reference (${activeAlert.itinerary.pnr}) via ${activeAlert.itinerary.airline}` break default: return } onTriggerNewTravel(trip, detectionMethod) setActiveAlert(null) setManualDestination("") setManualCountry("") setBookingReference("") } const dismissAlert = () => { setActiveAlert(null) } return (

{/* Header */}

Demo Settings

Simulate travel detection triggers

{/* Detection Alert Modal */} {activeAlert && (

New travel detected

{activeAlert.details}

{activeAlert.destination}

{activeAlert.itinerary && (

{activeAlert.itinerary.flights.map((flight, idx) => (

0 ? 'rotate-180' : ''}`} /> {flight.flightNumber}

{flight.date}

{flight.departureCity} → {flight.arrivalCity}

{flight.departure} - {flight.arrival}

))}

Passengers: {activeAlert.itinerary.passengers.join(", ")}

)}

)} {/* Trigger 0: Booking Reference */}

Booking Reference Lookup

Enter your PNR/booking reference to import flight itinerary from Amadeus GDS

Booking Reference (PNR) setBookingReference(e.target.value.toUpperCase())} className="mt-1 font-mono uppercase" maxLength={6} />

Try: ABC123 (Barcelona), XYZ789 (London), or any 5-6 character code

{/* Trigger 1: Visa Transaction */}

Visa Transaction Detection

Simulates a Visa card transaction with SAS Airlines MCC code (3000 - Airlines)

MCC: 3000 (Airlines)

SAS Scandinavian Airlines

Transaction: 2,450 NOK - Flight to Stockholm

{/* Trigger 2: Phone Network */}

Phone Network Detection

Simulates phone connecting to a foreign carrier network in Spain

Network: Movistar ES

Nearest tower: Madrid Centro

Signal strength: -67 dBm (Excellent)

{/* Trigger 3: Manual Start */}

Start Travel Manually

Manually start a new trip by entering destination details

Destination city setManualDestination(e.target.value)} className="mt-1" />

Country setManualCountry(e.target.value)} className="mt-1" />

{/* Info */}

These demo triggers simulate how the app automatically detects when you are travelling abroad. In production, these would be triggered by real Visa transactions, phone network changes, or user actions.

) } [V0_FILE]typescriptreact:file="components/travel/planning-screen.tsx" isMerged="true" "use client" import React from "react" import { useState, useRef } from "react" import type { Trip } from "@/lib/travel-types" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Input } from "@/components/ui/input" import { ArrowLeft, Calendar, MapPin, FileText, Info, ArrowRightLeft, Sparkles, X, File, ImageIcon, } from "lucide-react" interface UploadedDocument { id: string name: string type: string size: number url: string } interface PlanningScreenProps { trip: Trip onBack: () => void onUpdateBudget: (budget: number) => void detectionMethod?: string | null } export function PlanningScreen({ trip, onBack, onUpdateBudget, detectionMethod }: PlanningScreenProps) { const [budget, setBudget] = useState(trip.budget) const [documents, setDocuments] = useState([]) const fileInputRef = useRef(null) const handleFileUpload = (e: React.ChangeEvent) => { const files = e.target.files if (!files) return const newDocs: UploadedDocument[] = Array.from(files).map(file => ({ id: Math.random().toString(36).slice(2), name: file.name, type: file.type, size: file.size, url: URL.createObjectURL(file), })) setDocuments(prev => [...prev, ...newDocs]) if (fileInputRef.current) { fileInputRef.current.value = "" } } const removeDocument = (id: string) => { setDocuments(prev => prev.filter(doc => doc.id !== id)) } const formatFileSize = (bytes: number) => { if (bytes < 1024) return `${bytes} B` if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB` return `${(bytes / (1024 * 1024)).toFixed(1)} MB` } const formattedStartDate = new Date(trip.startDate).toLocaleDateString("no-NO", { day: "numeric", month: "long", year: "numeric", }) const formattedEndDate = new Date(trip.endDate).toLocaleDateString("no-NO", { day: "numeric", month: "long", year: "numeric", }) const budgetInEur = Math.round(budget / trip.exchangeRate) return (

{/* Header */}

Trip planning

{trip.destination}, {trip.country}

{/* Detection Method Banner */} {detectionMethod && (

Travel auto-detected

{detectionMethod}

)} {/* Trip Overview Card */}

{trip.destination}

{trip.country}

{formattedStartDate} – {formattedEndDate}

{/* Budget Setup */}

Set your budget

Trip budget

setBudget(Number(e.target.value))} className="w-28 text-right font-mono bg-secondary border-border text-foreground" /> NOK

setBudget(val)} min={10000} max={100000} step={1000} className="mt-4" />

10 000 kr 100 000 kr

{/* Currency Preview */}

Currency preview

{budget.toLocaleString("no-NO")} NOK

≈

{budgetInEur.toLocaleString("no-NO")} EUR

Rate: 1 EUR = {trip.exchangeRate} NOK

{/* Upload Documents */}

Travel documents

Upload boarding passes, hotel bookings, or other travel documents.

{/* Uploaded Documents List */} {documents.length > 0 && (

{documents.map(doc => (

{doc.type.startsWith("image/") ? ( ) : ( )}

{doc.name}

{formatFileSize(doc.size)}

))}

)}

Supported: PDF, JPG, PNG, DOC

{/* Info Card */}

We'll automatically track your spending during this trip based on your card payments abroad.

{/* Save Button */}

) } [V0_FILE]typescriptreact:file="components/travel/travel-hub.tsx" isMerged="true" "use client" import React from "react" import type { Trip } from "@/lib/travel-types" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { Progress } from "@/components/ui/progress" import { Wallet, Receipt, BarChart3, ChevronRight, MapPin, Calendar, TrendingUp, History, Sparkles, Plane, UtensilsCrossed, ShoppingCart, FolderLock, } from "lucide-react" interface TravelHubProps { trip: Trip onNavigate: (screen: string) => void showLocalCurrency: boolean onToggleLocalCurrency: (value: boolean) => void } export function TravelHub({ trip, onNavigate, showLocalCurrency, onToggleLocalCurrency }: TravelHubProps) { const safeToSpend = trip.budget - trip.spent const budgetProgress = (trip.spent / trip.budget) * 100 // Currency display helpers const displayCurrency = showLocalCurrency ? trip.localCurrency : "NOK" const displaySymbol = showLocalCurrency ? "" : "kr" const toDisplayAmount = (amountNOK: number) => showLocalCurrency ? Math.round(amountNOK / trip.exchangeRate) : amountNOK const formattedStartDate = new Date(trip.startDate).toLocaleDateString("no-NO", { day: "numeric", month: "short", }) const formattedEndDate = new Date(trip.endDate).toLocaleDateString("no-NO", { day: "numeric", month: "short", }) // Country flag mapping const countryFlags: Record = { IT: "🇮🇹", ES: "🇪🇸", FR: "🇫🇷", GB: "🇬🇧", DE: "🇩🇪", SE: "🇸🇪", DK: "🇩🇰", NL: "🇳🇱", US: "🇺🇸", JP: "🇯🇵", TH: "🇹🇭", GR: "🇬🇷", PT: "🇵🇹", NO: "🇳🇴", CH: "🇨🇭", } const flag = countryFlags[trip.countryCode] || "🏳️" // Calculate spending by category const categorySpending = trip.transactions.reduce((acc, transaction) => { acc[transaction.category] = (acc[transaction.category] || 0) + transaction.homeAmount return acc }, {} as Record) const transportSpent = categorySpending.transport || 0 const foodSpent = categorySpending.food || 0 const shoppingSpent = categorySpending.shopping || 0 const transportProgress = (transportSpent / trip.budget) * 100 const foodProgress = (foodSpent / trip.budget) * 100 const shoppingProgress = (shoppingSpent / trip.budget) * 100 return (

{/* Hero Section with Destination Image */}

{/* AI Search Bar */}

{/* Destination & Budget Info */}

{trip.destination} {flag}

{toDisplayAmount(trip.spent).toLocaleString("no-NO")} / {toDisplayAmount(trip.budget).toLocaleString("no-NO")}

{/* Currency Toggle */}

NOK {trip.localCurrency}

{/* Main Content */}

{/* Safe to Spend & FX Rate */}

Safe to spend

{toDisplayAmount(safeToSpend).toLocaleString("no-NO")} {showLocalCurrency ? displayCurrency : displaySymbol}

FX Rate

1 {trip.localCurrency} = {trip.exchangeRate} NOK

{/* Quick Actions */}

{/* Budget Overview Card */} onNavigate("categories")} >

{trip.destination} {flag}

{toDisplayAmount(trip.spent).toLocaleString("no-NO")}

{/* Transport Circle */}

{/* Food Circle */}

{/* Shopping Circle */}

} label="View spending" sublabel={`${trip.transactions.length} transactions`} onClick={() => onNavigate("spending")} /> } label="Receipts" sublabel="Manage expense documentation" onClick={() => onNavigate("receipts")} /> } label="Dokumenter" sublabel="Pass, forsikring og bookinger" onClick={() => onNavigate("documents")} /> {/* ATM Nearby */}

ATM nearby

3 locations within 500m

} label="Past trips" sublabel="View completed trip summaries" onClick={() => onNavigate("past-trips")} />

) } function ActionButton({ icon, label, sublabel, onClick, }: { icon: React.ReactNode label: string sublabel: string onClick: () => void }) { return ( ) } [V0_FILE]typescriptreact:file="components/travel/category-view.tsx" isMerged="true" "use client" import { useState } from "react" import type { Trip, Transaction } from "@/lib/travel-types" import { categoryIcons, categoryLabels } from "@/lib/travel-types" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, ChevronRight, } from "lucide-react" interface CategoryViewProps { trip: Trip onBack: () => void onSelectTransaction: (transaction: Transaction) => void } export function CategoryView({ trip, onBack, onSelectTransaction }: CategoryViewProps) { const [selectedCategory, setSelectedCategory] = useState(null) // Group transactions by category const transactionsByCategory = trip.transactions.reduce((acc, transaction) => { if (!acc[transaction.category]) { acc[transaction.category] = [] } acc[transaction.category].push(transaction) return acc }, {} as Record) // Calculate totals by category const categoryTotals = Object.entries(transactionsByCategory).map(([category, transactions]) => { const total = transactions.reduce((sum, t) => sum + t.homeAmount, 0) const percentage = (total / trip.spent) * 100 return { category, total, percentage, count: transactions.length, } }).sort((a, b) => b.total - a.total) if (selectedCategory) { const transactions = transactionsByCategory[selectedCategory] const CategoryIcon = categoryIcons[selectedCategory as keyof typeof categoryIcons] return (

{/* Header */}

{categoryLabels[selectedCategory as keyof typeof categoryLabels]}

{transactions.length} transactions

{transactions.reduce((sum, t) => sum + t.homeAmount, 0).toLocaleString("no-NO")}

{/* Transaction List */}

{transactions.map((transaction) => { const TransactionIcon = categoryIcons[transaction.category as keyof typeof categoryIcons] const date = new Date(transaction.date) const formattedDate = date.toLocaleDateString("no-NO", { weekday: "short", day: "2-digit", month: "2-digit", year: "2-digit" }) return ( onSelectTransaction(transaction)} >

{transaction.merchant}

{formattedDate}

- {transaction.homeAmount.toLocaleString("no-NO")}

{transaction.amount.toFixed(2)} {trip.localCurrency}

) })}

) } return (

{/* Header */}

Spending by category

{trip.destination}

{/* Category List */}

{categoryTotals.map(({ category, total, percentage, count }) => { const CategoryIcon = categoryIcons[category as keyof typeof categoryIcons] return ( setSelectedCategory(category)} >

{categoryLabels[category as keyof typeof categoryLabels]}

{percentage.toFixed(0)}% · {count} {count === 1 ? 'transaction' : 'transactions'}

{total.toLocaleString("no-NO")}

) })}

) } [V0_FILE]typescriptreact:file="components/travel/home-screen.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Search, ChevronRight, Plane, MapPin } from "lucide-react" import type { Trip } from "@/lib/travel-types" interface HomeScreenProps { activeTrip: Trip | null pastTrips: Trip[] onSelectTrip: (trip: Trip) => void userName?: string } export function HomeScreen({ activeTrip, pastTrips, onSelectTrip, userName = "Hjem" }: HomeScreenProps) { const countryFlags: Record = { IT: "🇮🇹", ES: "🇪🇸", FR: "🇫🇷", GB: "🇬🇧", DE: "🇩🇪", SE: "🇸🇪", DK: "🇩🇰", NL: "🇳🇱", US: "🇺🇸", JP: "🇯🇵", TH: "🇹🇭", GR: "🇬🇷", PT: "🇵🇹", NO: "🇳🇴", CH: "🇨🇭", } const formatCurrency = (amount: number) => { return amount.toLocaleString("no-NO") } const calculateProgress = (spent: number, budget: number) => { return Math.min((spent / budget) * 100, 100) } return (

{/* Header */}

{userName}

{/* Main Content */}

{/* Active Trip Card */} {activeTrip && ( onSelectTrip(activeTrip)} > {/* Background Image */}

{/* Active Badge */}

Aktiv

{/* Trip Info Overlay */}

{activeTrip.destination} {countryFlags[activeTrip.countryCode] || ""}

{formatCurrency(activeTrip.spent)} / {formatCurrency(activeTrip.budget)}

)} {/* Past Trips Section */} {pastTrips.length > 0 && (

Mine reiser ({pastTrips.length})

{pastTrips.slice(0, 5).map((trip) => ( onSelectTrip(trip)} >

{trip.destination} {countryFlags[trip.countryCode] || ""}

{new Date(trip.startDate).toLocaleDateString("no-NO", { year: "numeric", month: "short" })}

{formatCurrency(trip.spent)}

av {formatCurrency(trip.budget)}

))}

)} {/* New Trip Button */}

) } [V0_FILE]typescriptreact:file="components/travel/spending-screen.tsx" isMerged="true" "use client" import { useState } from "react" import type { Trip, Transaction } from "@/lib/travel-types" import { categoryIcons, categoryLabels } from "@/lib/travel-types" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Switch } from "@/components/ui/switch" import { ATMMapView } from "@/components/travel/atm-map-view" import { ArrowLeft, TrendingUp, MapPin, Info, } from "lucide-react" interface SpendingScreenProps { trip: Trip onBack: () => void showLocalCurrency: boolean onToggleLocalCurrency: (value: boolean) => void } export function SpendingScreen({ trip, onBack, showLocalCurrency, onToggleLocalCurrency }: SpendingScreenProps) { const [showATMMap, setShowATMMap] = useState(false) const safeToSpend = trip.budget - trip.spent const budgetProgress = (trip.spent / trip.budget) * 100 // Currency display helpers const displayCurrency = showLocalCurrency ? trip.localCurrency : "NOK" const displaySymbol = showLocalCurrency ? "" : "kr" const toDisplayAmount = (amountNOK: number) => showLocalCurrency ? Math.round(amountNOK / trip.exchangeRate) : amountNOK // Group transactions by date const transactionsByDate = trip.transactions.reduce( (acc, tx) => { const date = tx.date if (!acc[date]) acc[date] = [] acc[date].push(tx) return acc }, {} as Record ) const sortedDates = Object.keys(transactionsByDate).sort( (a, b) => new Date(b).getTime() - new Date(a).getTime() ) const formatDate = (dateStr: string) => { const date = new Date(dateStr) const today = new Date() const yesterday = new Date(today) yesterday.setDate(yesterday.getDate() - 1) if (date.toDateString() === today.toDateString()) return "Today" if (date.toDateString() === yesterday.toDateString()) return "Yesterday" return date.toLocaleDateString("no-NO", { weekday: "long", day: "numeric", month: "long", }) } if (showATMMap) { return ( setShowATMMap(false)} /> ) } return (

{/* Header */}

Live spending

{trip.destination}, {trip.country}

NOK {trip.localCurrency}

{/* Budget Progress Card */}

Spent

{toDisplayAmount(trip.spent).toLocaleString("no-NO")} {showLocalCurrency ? displayCurrency : displaySymbol}

of {toDisplayAmount(trip.budget).toLocaleString("no-NO")} {showLocalCurrency ? displayCurrency : displaySymbol}

{Math.round(budgetProgress)}% used

{/* Safe to Spend Alert */}

Safe to spend

{toDisplayAmount(safeToSpend).toLocaleString("no-NO")} {showLocalCurrency ? displayCurrency : displaySymbol}

{/* Exchange Rate Info */}

1 {trip.localCurrency} = {trip.exchangeRate} NOK (live rate)

{/* ATM Locations Card */}

ATM nearby

3 locations within 500m

{/* Transaction Timeline */}

Transactions

{sortedDates.map((date) => (

{formatDate(date)}

{transactionsByDate[date].map((tx) => ( ))}

))}

) } function TransactionRow({ transaction }: { transaction: Transaction }) { const CategoryIcon = categoryIcons[transaction.category] return (

{transaction.merchantName}

{categoryLabels[transaction.category]} · {transaction.time}

{transaction.localAmount} {transaction.localCurrency}

{transaction.homeAmount.toLocaleString("no-NO")} kr

) } [V0_FILE]typescript:file="app/api/travel-assistant/route.ts" isMerged="true" import { consumeStream, convertToModelMessages, streamText, UIMessage, } from 'ai'; export const maxDuration = 30; export async function POST(req: Request) { const { messages, tripContext }: { messages: UIMessage[]; tripContext: { destination: string; country: string; budget: number; spent: number; localCurrency: string; startDate: string; endDate: string; } } = await req.json(); const systemPrompt = `You are a helpful travel assistant for someone visiting ${tripContext.destination}, ${tripContext.country}. Trip details: - Destination: ${tripContext.destination}, ${tripContext.country} - Travel dates: ${tripContext.startDate} to ${tripContext.endDate} - Total budget: ${tripContext.budget} NOK (${Math.round(tripContext.budget / 11.42)} EUR approximately) - Already spent: ${tripContext.spent} NOK - Remaining budget: ${tripContext.budget - tripContext.spent} NOK - Local currency: ${tripContext.localCurrency} You help travelers with: 1. Hotel recommendations (budget-friendly to luxury based on their remaining budget) 2. Restaurant suggestions (local cuisine, price ranges, must-try dishes) 3. Attractions and activities (free/paid, opening hours, tips) 4. Day-by-day itinerary planning based on budget 5. Money-saving tips for the destination 6. Local customs and etiquette 7. Transportation advice IMPORTANT FORMATTING RULES: - You MUST use full Markdown formatting in your responses. - For EVERY hotel, restaurant, or attraction you recommend, include: 1. A relevant image using markdown: ![Description](image_url) 2. A clickable link: [Name](url) - For images, use real Unsplash photos. Use these URL patterns: - Hotels: https://images.unsplash.com/photo-1566073771259-6a8506099945?w=600&h=400&fit=crop (luxury hotel) - Hotels: https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=600&h=400&fit=crop (boutique hotel) - Hotels: https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=600&h=400&fit=crop (resort hotel) - Restaurants: https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=600&h=400&fit=crop (restaurant interior) - Restaurants: https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600&h=400&fit=crop (fine dining) - Italian food: https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=600&h=400&fit=crop (pizza) - Italian food: https://images.unsplash.com/photo-1551183053-bf91a1d81141?w=600&h=400&fit=crop (pasta) - Colosseum: https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=600&h=400&fit=crop - Vatican: https://images.unsplash.com/photo-1531572753322-ad063cecc140?w=600&h=400&fit=crop - Trevi Fountain: https://images.unsplash.com/photo-1525874684015-58379d421a52?w=600&h=400&fit=crop - Pantheon: https://images.unsplash.com/photo-1583265627959-fb7042f5133b?w=600&h=400&fit=crop - Roma streets: https://images.unsplash.com/photo-1529260830199-42c24126f198?w=600&h=400&fit=crop - Trastevere: https://images.unsplash.com/photo-1578922746465-660321e5a1f9?w=600&h=400&fit=crop - Shopping: https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600&h=400&fit=crop - Coffee/cafe: https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=600&h=400&fit=crop - Gelato: https://images.unsplash.com/photo-1567206563064-6f60f40a2b57?w=600&h=400&fit=crop - For links use real booking/review sites like: - Hotels: https://www.booking.com/hotel/... or https://www.tripadvisor.com/Hotel-... - Restaurants: https://www.tripadvisor.com/Restaurant-... - Attractions: https://www.tripadvisor.com/Attraction-... or the official website - Use **bold** for hotel/restaurant names and prices. - Use headers (## or ###) to organize sections. - Use bullet points for details. - ALWAYS include at least one image per recommendation. Always consider the user's remaining budget when making recommendations. Provide prices in both local currency and NOK when possible. Be concise but helpful. When planning days, consider: - Grouping nearby attractions - Including meal breaks with restaurant suggestions - Balancing paid and free activities - Accounting for travel time between locations`; const modelMessages = await convertToModelMessages(messages); const result = streamText({ model: 'openai/gpt-4o', system: systemPrompt, messages: modelMessages, abortSignal: req.signal, maxOutputTokens: 4000, }); return result.toUIMessageStreamResponse({ consumeSseStream: consumeStream, }); } [V0_FILE]typescriptreact:file="components/travel/leaflet-map.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface MapMarker { lat: number lng: number label?: string color?: string isUser?: boolean } interface LeafletMapProps { center: [number, number] zoom?: number markers?: MapMarker[] className?: string } export function LeafletMap({ center, zoom = 15, markers = [], className = "" }: LeafletMapProps) { const mapRef = useRef(null) const mapInstanceRef = useRef(null) useEffect(() => { if (!mapRef.current || mapInstanceRef.current) return // Load Leaflet CSS const linkEl = document.createElement("link") linkEl.rel = "stylesheet" linkEl.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" document.head.appendChild(linkEl) // Load Leaflet JS const script = document.createElement("script") script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" script.onload = () => { if (!mapRef.current) return const L = (window as any).L const map = L.map(mapRef.current, { zoomControl: false, attributionControl: false, }).setView(center, zoom) // Dark tile layer L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", { maxZoom: 19, }).addTo(map) // Add markers markers.forEach((marker) => { if (marker.isUser) { // User location - blue pulsing dot const userIcon = L.divIcon({ className: "custom-marker", html: `

`, iconSize: [16, 16], iconAnchor: [8, 8], }) L.marker([marker.lat, marker.lng], { icon: userIcon }).addTo(map) } else { // ATM / location markers const color = marker.color || "#22c55e" const markerIcon = L.divIcon({ className: "custom-marker", html: `

${marker.label || ""}

`, iconSize: [32, 40], iconAnchor: [16, 40], }) L.marker([marker.lat, marker.lng], { icon: markerIcon }).addTo(map) } }) mapInstanceRef.current = map } document.head.appendChild(script) return () => { if (mapInstanceRef.current) { mapInstanceRef.current.remove() mapInstanceRef.current = null } } }, [center, zoom, markers]) return

} [V0_FILE]typescriptreact:file="components/travel/transaction-detail.tsx" isMerged="true" "use client" import type { Trip, Transaction } from "@/lib/travel-types" import { categoryIcons, categoryLabels } from "@/lib/travel-types" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, MapPin, CreditCard, Calendar, Clock, Edit, Barcode, } from "lucide-react" import { LeafletMap } from "@/components/travel/leaflet-map" interface TransactionDetailProps { transaction: Transaction trip: Trip onBack: () => void } export function TransactionDetail({ transaction, trip, onBack }: TransactionDetailProps) { const CategoryIcon = categoryIcons[transaction.category] const categoryLabel = categoryLabels[transaction.category] const date = new Date(transaction.date) const formattedDate = date.toLocaleDateString("no-NO", { weekday: "long", day: "2-digit", month: "2-digit", year: "numeric" }) const formattedTime = "22:47" // Mock time // Mock receipt items based on merchant const receiptItems = transaction.hasReceipt ? [ { name: "Acqua S. Angelo natur", quantity: 3, price: 1.32 }, { name: "Milk pro porridge", quantity: 1, price: 1.65 }, { name: "Crik Croc", quantity: 1, price: 2.85 }, ] : [] const subtotal = receiptItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) const vatRate = 0.22 const vatAmount = subtotal * vatRate const total = subtotal + vatAmount return (

{/* Header */}

{formattedDate}

{/* Transaction Header */}

{transaction.merchant}

- {transaction.homeAmount.toLocaleString("no-NO")}

{formattedDate} {formattedTime}

{/* Category */}

{categoryLabel}

{/* Map Location */} {transaction.location && (

{transaction.location}

)} {/* Payment Card */}

FROM

Brukskonto

4785 11** **** 2422

{/* Receipt */} {transaction.hasReceipt && receiptItems.length > 0 && (

{transaction.merchant}

{transaction.amount.toFixed(2)} {trip.localCurrency}

Via Castel Morrone, 35,

20129 Milano MI, Italia

{/* Items */}

{receiptItems.map((item, idx) => (

{item.name} {item.price.toFixed(2)}

))}

Payment method Credit card

MVA % {(vatRate * 100).toFixed(0)}%

MVA sum {vatAmount.toFixed(2)}

Sum eksl. MVA {subtotal.toFixed(2)}

Totalsum {transaction.amount.toFixed(2)} {trip.localCurrency}

{/* Barcode */}

2 3 6 8 2 3 7 8 4 5 1 ||

)}

) } [V0_FILE]typescriptreact:file="components/travel/documents-screen.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { ArrowLeft, Plus, FileText, Shield, Plane, CreditCard, Ticket, Paperclip, Camera, Image as ImageIcon, Trash2, Eye, X, Upload, CheckCircle2, } from "lucide-react" export type DocumentType = "passport" | "insurance" | "booking" | "visa" | "ticket" | "other" export interface TravelDocument { id: string name: string type: DocumentType fileUrl: string fileName: string uploadedAt: string tripId?: string } const documentTypeConfig: Record = { passport: { label: "Pass", icon: Shield, color: "text-blue-400", bgColor: "bg-blue-500/20" }, insurance: { label: "Forsikring", icon: FileText, color: "text-emerald-400", bgColor: "bg-emerald-500/20" }, booking: { label: "Booking", icon: CreditCard, color: "text-purple-400", bgColor: "bg-purple-500/20" }, visa: { label: "Visum", icon: Plane, color: "text-amber-400", bgColor: "bg-amber-500/20" }, ticket: { label: "Billett", icon: Ticket, color: "text-rose-400", bgColor: "bg-rose-500/20" }, other: { label: "Annet", icon: Paperclip, color: "text-gray-400", bgColor: "bg-gray-500/20" }, } const MOCK_DOCUMENTS: TravelDocument[] = [ { id: "doc-1", name: "Pass - Ola Nordmann", type: "passport", fileUrl: "", fileName: "pass_ola_nordmann.pdf", uploadedAt: "2025-12-10", }, { id: "doc-2", name: "Reiseforsikring Europeiske", type: "insurance", fileUrl: "", fileName: "forsikring_2026.pdf", uploadedAt: "2025-12-15", }, { id: "doc-3", name: "Hotel Artemide - Roma", type: "booking", fileUrl: "", fileName: "hotel_artemide_booking.pdf", uploadedAt: "2026-01-05", tripId: "roma-2026", }, ] interface DocumentsScreenProps { onBack: () => void tripId?: string tripName?: string } export function DocumentsScreen({ onBack, tripId, tripName }: DocumentsScreenProps) { const [documents, setDocuments] = useState(MOCK_DOCUMENTS) const [showUploadDialog, setShowUploadDialog] = useState(false) const [previewDoc, setPreviewDoc] = useState(null) const [deleteConfirmId, setDeleteConfirmId] = useState(null) // Upload form state const [newDocName, setNewDocName] = useState("") const [newDocType, setNewDocType] = useState("other") const [selectedFile, setSelectedFile] = useState(null) const fileInputRef = useRef(null) const allDocs = tripId ? documents.filter((d) => d.tripId === tripId || !d.tripId) : documents const handleUpload = () => { if (!newDocName.trim()) return const newDoc: TravelDocument = { id: `doc-${Date.now()}`, name: newDocName, type: newDocType, fileUrl: "", fileName: selectedFile?.name || "uploaded_file.pdf", uploadedAt: new Date().toISOString().split("T")[0], tripId: tripId, } setDocuments((prev) => [...prev, newDoc]) setNewDocName("") setNewDocType("other") setSelectedFile(null) setShowUploadDialog(false) } const handleDelete = (docId: string) => { setDocuments((prev) => prev.filter((d) => d.id !== docId)) setDeleteConfirmId(null) } const handleFileSelect = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { setSelectedFile(file) if (!newDocName) { setNewDocName(file.name.replace(/\.[^.]+$/, "")) } } } const formatDate = (dateStr: string) => { return new Date(dateStr).toLocaleDateString("no-NO", { day: "numeric", month: "short", year: "numeric", }) } return (

{/* Header */}

Dokumenter

{tripName && (

{tripName}

)}

{/* Document List */}

{allDocs.length === 0 ? (

Ingen dokumenter enda

Last opp pass, forsikring og bookinger

) : ( <> {/* Group by type */} {(Object.keys(documentTypeConfig) as DocumentType[]).map((type) => { const docsOfType = allDocs.filter((d) => d.type === type) if (docsOfType.length === 0) return null const config = documentTypeConfig[type] const Icon = config.icon return (

{config.label} {docsOfType.length}

{docsOfType.map((doc) => ( setPreviewDoc(doc)} onDelete={() => setDeleteConfirmId(doc.id)} formatDate={formatDate} /> ))}

) })} )}

{/* Upload Dialog */} {/* Preview Dialog */} {/* Delete Confirmation Dialog */}

) } function DocumentCard({ doc, config, onPreview, onDelete, formatDate, }: { doc: TravelDocument config: { label: string; icon: typeof FileText; color: string; bgColor: string } onPreview: () => void onDelete: () => void formatDate: (d: string) => string }) { const Icon = config.icon return (

{doc.name}

{formatDate(doc.uploadedAt)} - {doc.fileName}

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { TravelHub } from "@/components/travel/travel-hub" import { PlanningScreen } from "@/components/travel/planning-screen" import { SpendingScreen } from "@/components/travel/spending-screen" import { ReceiptsScreen } from "@/components/travel/receipts-screen" import { TripSummary } from "@/components/travel/trip-summary" import { PastTrips } from "@/components/travel/past-trips" import { TravelAssistant } from "@/components/travel/travel-assistant" import { DemoSettings, currencyOptions, type CurrencyOption } from "@/components/travel/demo-settings" import { ATMMapView } from "@/components/travel/atm-map-view" import { CategoryView } from "@/components/travel/category-view" import { TransactionDetail } from "@/components/travel/transaction-detail" import { HomeScreen } from "@/components/travel/home-screen" import { DocumentsScreen } from "@/components/travel/documents-screen" import { BottomNav } from "@/components/travel/bottom-nav" import { mockTrips, getActiveTrip, getCompletedTrips } from "@/lib/mock-data" import type { Trip, Transaction } from "@/lib/travel-types" type Screen = "home" | "hub" | "planning" | "spending" | "receipts" | "summary" | "past-trips" | "settings" | "assistant" | "atm-map" | "categories" | "transaction-detail" | "documents" export default function TravelControlPage() { const [currentScreen, setCurrentScreen] = useState("home") const [activeTab, setActiveTab] = useState("travel") const [activeTrip, setActiveTrip] = useState(getActiveTrip() || mockTrips[0]) const [selectedCompletedTrip, setSelectedCompletedTrip] = useState(null) const [selectedTransaction, setSelectedTransaction] = useState(null) const [detectionMethod, setDetectionMethod] = useState(null) const [currentCurrency, setCurrentCurrency] = useState(currencyOptions[0]) const [showLocalCurrency, setShowLocalCurrency] = useState(false) const handleNavigate = (screen: string) => { setCurrentScreen(screen as Screen) } const handleBack = () => { if (selectedCompletedTrip) { setSelectedCompletedTrip(null) setCurrentScreen("past-trips") } else if (currentScreen === "hub") { setCurrentScreen("home") } else { setCurrentScreen("hub") } } const handleUpdateBudget = (budget: number) => { setActiveTrip((prev) => ({ ...prev, budget })) setCurrentScreen("hub") } const handleSelectCompletedTrip = (trip: Trip) => { setSelectedCompletedTrip(trip) setCurrentScreen("summary") } const handleSelectTransaction = (transaction: Transaction) => { setSelectedTransaction(transaction) setCurrentScreen("transaction-detail") } const handleSelectTripFromHome = (trip: Trip) => { setActiveTrip(trip) setCurrentScreen("hub") } const handleTabChange = (tab: string) => { setActiveTab(tab) if (tab === "travel") { setCurrentScreen("home") setSelectedCompletedTrip(null) } else if (tab === "settings") { setCurrentScreen("settings") } } const handleTriggerNewTravel = (trip: Trip, method: string) => { setActiveTrip(trip) setDetectionMethod(method) setCurrentScreen("planning") setActiveTab("travel") } const handleCurrencyChange = (currency: CurrencyOption) => { setCurrentCurrency(currency) setActiveTrip((prev) => ({ ...prev, localCurrency: currency.code, exchangeRate: currency.rate, })) } const tripToShow = selectedCompletedTrip || activeTrip const renderScreen = () => { switch (currentScreen) { case "home": return ( ) case "hub": return ( ) case "planning": return ( ) case "spending": return ( ) case "receipts": return case "summary": return case "past-trips": return ( ) case "settings": return ( ) case "assistant": return ( ) case "atm-map": return ( ) case "categories": return ( ) case "transaction-detail": return selectedTransaction ? ( ) : null case "documents": return ( ) default: return } } return (

{/* Mobile Container */}

{renderScreen()}

{/* Bottom Navigation */}

) }