Initial commit: Second Brain Platform

Complete platform with unified design system and real API integration. Apps: Dashboard, Fitness, Budget, Inventory, Trips, Reader, Media, Settings Infrastructure: SvelteKit + Python gateway + Docker Compose
2026-03-28 23:20:40 -05:00
commit d3e250e361
159 changed files with 44797 additions and 0 deletions
--- a/services/trips/frontend-legacy/.dockerignore
+++ b/services/trips/frontend-legacy/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+.svelte-kit
+build
--- a/services/trips/frontend-legacy/.gitignore
+++ b/services/trips/frontend-legacy/.gitignore
@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/services/trips/frontend-legacy/.npmrc
+++ b/services/trips/frontend-legacy/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
--- a/services/trips/frontend-legacy/.vscode/extensions.json
+++ b/services/trips/frontend-legacy/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+	"recommendations": ["svelte.svelte-vscode"]
+}
--- a/services/trips/frontend-legacy/Dockerfile
+++ b/services/trips/frontend-legacy/Dockerfile
@@ -0,0 +1,16 @@
+FROM node:22-slim AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM node:22-slim
+WORKDIR /app
+COPY --from=build /app/build ./build
+COPY --from=build /app/package.json ./
+COPY --from=build /app/node_modules ./node_modules
+ENV NODE_ENV=production
+ENV PORT=3000
+EXPOSE 3000
+CMD ["node", "build"]
--- a/services/trips/frontend-legacy/README.md
+++ b/services/trips/frontend-legacy/README.md
@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.12.8 create --template minimal --types ts --no-install frontend
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
--- a/services/trips/frontend-legacy/package-lock.json
+++ b/services/trips/frontend-legacy/package-lock.json
--- a/services/trips/frontend-legacy/package.json
+++ b/services/trips/frontend-legacy/package.json
@@ -0,0 +1,29 @@
+{
+	"name": "frontend",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"svelte": "^5.51.0",
+		"svelte-check": "^4.4.2",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
+	},
+	"dependencies": {
+		"@sveltejs/adapter-node": "^5.5.4",
+		"@tailwindcss/vite": "^4.2.2",
+		"daisyui": "^5.5.19",
+		"tailwindcss": "^4.2.2"
+	}
+}
--- a/services/trips/frontend-legacy/src/app.css
+++ b/services/trips/frontend-legacy/src/app.css
@@ -0,0 +1,29 @@
+@import 'tailwindcss';
+@plugin 'daisyui' {
+	themes: night, dim, light;
+}
+
+/* Custom overrides for AdventureLog-style feel */
+:root {
+	--header-height: 4rem;
+}
+
+/* Smooth transitions on theme change */
+* {
+	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Better scrollbar for dark theme */
+::-webkit-scrollbar {
+	width: 8px;
+}
+::-webkit-scrollbar-track {
+	background: oklch(0.2 0.02 260);
+}
+::-webkit-scrollbar-thumb {
+	background: oklch(0.4 0.02 260);
+	border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+	background: oklch(0.5 0.02 260);
+}
--- a/services/trips/frontend-legacy/src/app.d.ts
+++ b/services/trips/frontend-legacy/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/services/trips/frontend-legacy/src/app.html
+++ b/services/trips/frontend-legacy/src/app.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" data-theme="night">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#1a1d2e" />
+		<title>Trips</title>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="min-h-screen bg-base-100">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/services/trips/frontend-legacy/src/hooks.server.ts
+++ b/services/trips/frontend-legacy/src/hooks.server.ts
@@ -0,0 +1,70 @@
+import type { Handle } from '@sveltejs/kit';
+
+const API_BACKEND = process.env.VITE_API_URL || 'http://localhost:8087';
+const IMMICH_URL = process.env.IMMICH_URL || '';
+const IMMICH_API_KEY = process.env.IMMICH_API_KEY || '';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	// Direct Immich thumbnail proxy (bypass Python backend for speed)
+	if (event.url.pathname.startsWith('/api/immich/thumb/') && IMMICH_URL && IMMICH_API_KEY) {
+		const assetId = event.url.pathname.split('/').pop();
+		try {
+			const response = await fetch(`${IMMICH_URL}/api/assets/${assetId}/thumbnail`, {
+				headers: { 'x-api-key': IMMICH_API_KEY }
+			});
+			return new Response(response.body, {
+				status: response.status,
+				headers: {
+					'Content-Type': response.headers.get('Content-Type') || 'image/webp',
+					'Cache-Control': 'public, max-age=86400'
+				}
+			});
+		} catch {
+			return new Response('', { status: 502 });
+		}
+	}
+
+	// Proxy /api/* and /images/* requests to the Python backend
+	if (event.url.pathname.startsWith('/api/') || event.url.pathname.startsWith('/images/')) {
+		const targetUrl = `${API_BACKEND}${event.url.pathname}${event.url.search}`;
+
+		const headers = new Headers();
+		// Forward relevant headers
+		for (const [key, value] of event.request.headers.entries()) {
+			if (['authorization', 'content-type', 'cookie', 'x-api-key'].includes(key.toLowerCase())) {
+				headers.set(key, value);
+			}
+		}
+
+		// For image/asset requests without auth (e.g. <img> tags), use the server-side API key
+		if (!headers.has('authorization') && !headers.has('cookie')) {
+			const apiKey = process.env.TRIPS_API_KEY;
+			if (apiKey) {
+				headers.set('Authorization', `Bearer ${apiKey}`);
+			}
+		}
+
+		try {
+			const response = await fetch(targetUrl, {
+				method: event.request.method,
+				headers,
+				body: event.request.method !== 'GET' && event.request.method !== 'HEAD'
+					? await event.request.arrayBuffer()
+					: undefined,
+			});
+
+			return new Response(response.body, {
+				status: response.status,
+				headers: response.headers,
+			});
+		} catch (err) {
+			console.error('Proxy error:', err);
+			return new Response(JSON.stringify({ error: 'Backend unavailable' }), {
+				status: 502,
+				headers: { 'Content-Type': 'application/json' },
+			});
+		}
+	}
+
+	return resolve(event);
+};
--- a/services/trips/frontend-legacy/src/lib/api/client.ts
+++ b/services/trips/frontend-legacy/src/lib/api/client.ts
@@ -0,0 +1,53 @@
+const API_BASE = import.meta.env.VITE_API_URL || '';
+
+export function hasToken(): boolean {
+	return typeof window !== 'undefined' && !!localStorage.getItem('api_token');
+}
+
+export async function api<T>(path: string, options: RequestInit = {}): Promise<T> {
+	const token = typeof window !== 'undefined' ? localStorage.getItem('api_token') : null;
+
+	if (!token && typeof window !== 'undefined' && !window.location.pathname.startsWith('/login')) {
+		window.location.href = '/login';
+		throw new Error('No token');
+	}
+
+	const headers: Record<string, string> = {
+		...(options.headers as Record<string, string> || {})
+	};
+
+	if (token) {
+		headers['Authorization'] = `Bearer ${token}`;
+	}
+
+	if (options.body && typeof options.body === 'string') {
+		headers['Content-Type'] = 'application/json';
+	}
+
+	const res = await fetch(`${API_BASE}${path}`, {
+		...options,
+		headers,
+		credentials: 'include'
+	});
+
+	if (res.status === 401) {
+		if (typeof window !== 'undefined') {
+			localStorage.removeItem('api_token');
+			window.location.href = '/login';
+		}
+		throw new Error('Unauthorized');
+	}
+
+	return res.json();
+}
+
+export function get<T>(path: string) {
+	return api<T>(path);
+}
+
+export function post<T>(path: string, data: unknown) {
+	return api<T>(path, {
+		method: 'POST',
+		body: JSON.stringify(data)
+	});
+}
--- a/services/trips/frontend-legacy/src/lib/api/types.ts
+++ b/services/trips/frontend-legacy/src/lib/api/types.ts
@@ -0,0 +1,109 @@
+export interface Trip {
+	id: string;
+	name: string;
+	description: string;
+	start_date: string;
+	end_date: string;
+	image_path: string | null;
+	cover_image: string | null;
+	share_token: string | null;
+	created_at: string;
+	immich_album_id: string | null;
+}
+
+export interface Transportation {
+	id: string;
+	trip_id: string;
+	name: string;
+	type: string;
+	flight_number: string;
+	from_location: string;
+	to_location: string;
+	date: string;
+	end_date: string;
+	timezone: string;
+	description: string;
+	link: string;
+	cost_points: number;
+	cost_cash: number;
+	from_place_id: string;
+	to_place_id: string;
+	from_lat: number | null;
+	from_lng: number | null;
+	to_lat: number | null;
+	to_lng: number | null;
+}
+
+export interface Lodging {
+	id: string;
+	trip_id: string;
+	name: string;
+	type: string;
+	location: string;
+	check_in: string;
+	check_out: string;
+	timezone: string;
+	reservation_number: string;
+	description: string;
+	link: string;
+	cost_points: number;
+	cost_cash: number;
+	place_id: string;
+	latitude: number | null;
+	longitude: number | null;
+}
+
+export interface Location {
+	id: string;
+	trip_id: string;
+	name: string;
+	description: string;
+	latitude: number | null;
+	longitude: number | null;
+	category: string;
+	visit_date: string;
+	start_time: string;
+	end_time: string;
+	link: string;
+	cost_points: number;
+	cost_cash: number;
+	hike_distance: string;
+	hike_difficulty: string;
+	hike_time: string;
+	place_id: string;
+	address: string;
+}
+
+export interface Note {
+	id: string;
+	trip_id: string;
+	name: string;
+	content: string;
+	date: string;
+}
+
+export interface TripDetail extends Trip {
+	transportations: Transportation[];
+	lodging: Lodging[];
+	locations: Location[];
+	notes: Note[];
+	images: TripImage[];
+	documents: TripDocument[];
+}
+
+export interface TripImage {
+	id: string;
+	entity_type: string;
+	entity_id: string;
+	file_path: string;
+	is_primary: number;
+}
+
+export interface TripDocument {
+	id: string;
+	entity_type: string;
+	entity_id: string;
+	file_path: string;
+	original_name: string;
+	mime_type: string;
+}
--- a/services/trips/frontend-legacy/src/lib/assets/favicon.svg
+++ b/services/trips/frontend-legacy/src/lib/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
--- a/services/trips/frontend-legacy/src/lib/components/AIGuideModal.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/AIGuideModal.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { post } from '$lib/api/client';
+
+	let {
+		tripId,
+		tripName = '',
+		onClose
+	}: {
+		tripId: string;
+		tripName?: string;
+		onClose: () => void;
+	} = $props();
+
+	let modal = $state<HTMLDialogElement | null>(null);
+	let loading = $state(false);
+	let content = $state('');
+	let error = $state('');
+	let provider = $state<'gemini' | 'openai'>('gemini');
+
+	let initialized = false;
+	$effect(() => {
+		if (modal && !initialized) {
+			initialized = true;
+			modal.showModal();
+		}
+	});
+
+	async function generate() {
+		loading = true;
+		error = '';
+		content = '';
+		try {
+			const data = await post<{ suggestions?: string; content?: string; error?: string }>('/api/ai-guide', {
+				trip_id: tripId,
+				provider
+			});
+			if (data.error) {
+				error = data.error;
+			} else {
+				content = data.suggestions || data.content || '';
+			}
+		} catch {
+			error = 'Failed to generate guide';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function close() { modal?.close(); onClose(); }
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
+	<div class="modal-box max-w-3xl max-h-[85vh] flex flex-col">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4 shrink-0">
+			<div class="p-2 rounded-xl bg-accent/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+				</svg>
+			</div>
+			AI Trip Guide
+			<span class="text-sm font-normal text-base-content/40">— {tripName}</span>
+		</h3>
+
+		{#if !content && !loading}
+			<div class="space-y-4">
+				<p class="text-sm text-base-content/60">
+					Generate personalized travel suggestions, tips, and recommendations for your trip using AI with real-time web search.
+				</p>
+
+				<div class="flex gap-2">
+					<label class="label cursor-pointer gap-2">
+						<input type="radio" name="provider" class="radio radio-sm radio-primary" value="gemini" bind:group={provider} />
+						<span class="label-text">Gemini (with web search)</span>
+					</label>
+					<label class="label cursor-pointer gap-2">
+						<input type="radio" name="provider" class="radio radio-sm radio-primary" value="openai" bind:group={provider} />
+						<span class="label-text">OpenAI</span>
+					</label>
+				</div>
+
+				{#if error}
+					<div class="alert alert-error text-sm py-2"><span>{error}</span></div>
+				{/if}
+
+				<button class="btn btn-primary w-full" onclick={generate}>
+					Generate Trip Guide
+				</button>
+			</div>
+		{:else if loading}
+			<div class="flex-1 flex flex-col items-center justify-center py-12">
+				<span class="loading loading-spinner loading-lg text-primary mb-4"></span>
+				<p class="text-sm text-base-content/50">Researching your trip...</p>
+				<p class="text-xs text-base-content/30 mt-1">This may take 15-30 seconds</p>
+			</div>
+		{:else}
+			<div class="flex-1 overflow-y-auto min-h-0">
+				<div class="prose prose-sm max-w-none text-base-content/80">
+					{@html content.replace(/\n/g, '<br>')}
+				</div>
+			</div>
+			<div class="flex gap-2 mt-4 pt-4 border-t border-base-300 shrink-0">
+				<button class="btn btn-ghost btn-sm" onclick={() => { content = ''; error = ''; }}>
+					Regenerate
+				</button>
+				<button class="btn btn-ghost btn-sm" onclick={close}>Close</button>
+			</div>
+		{/if}
+	</div>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
+</dialog>
--- a/services/trips/frontend-legacy/src/lib/components/DocumentUpload.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/DocumentUpload.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { post } from '$lib/api/client';
+
+	let {
+		entityType,
+		entityId,
+		documents = [],
+		onUpload
+	}: {
+		entityType: string;
+		entityId: string;
+		documents: any[];
+		onUpload: () => void;
+	} = $props();
+
+	let uploading = $state(false);
+	let deletingId = $state('');
+
+	async function handleFileSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (!input.files?.length || !entityId) return;
+
+		uploading = true;
+		try {
+			for (const file of input.files) {
+				const formData = new FormData();
+				formData.append('entity_type', entityType);
+				formData.append('entity_id', entityId);
+				formData.append('file', file);
+
+				const token = localStorage.getItem('api_token') || '';
+				await fetch('/api/document/upload', {
+					method: 'POST',
+					headers: { 'Authorization': `Bearer ${token}` },
+					body: formData
+				});
+			}
+			onUpload();
+		} catch (e) {
+			console.error('Upload failed:', e);
+		} finally {
+			uploading = false;
+			input.value = '';
+		}
+	}
+
+	async function deleteDoc(docId: string) {
+		deletingId = docId;
+		try {
+			await post('/api/document/delete', { document_id: docId });
+			onUpload();
+		} catch (e) {
+			console.error('Delete failed:', e);
+		} finally {
+			deletingId = '';
+		}
+	}
+
+	function fileIcon(mime: string): string {
+		if (mime?.includes('pdf')) return 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6';
+		if (mime?.includes('image')) return 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8.5 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM21 15l-5-5L5 21';
+		return 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6';
+	}
+</script>
+
+<div class="space-y-2">
+	<!-- Existing documents -->
+	{#if documents.length > 0}
+		<div class="space-y-1">
+			{#each documents as doc}
+				<div class="flex items-center gap-2 p-2 rounded-lg bg-base-300/30 group">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/40 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d={fileIcon(doc.mime_type)}/>
+					</svg>
+					<a href={doc.url} target="_blank" class="flex-1 text-sm text-base-content/70 hover:text-primary truncate">
+						{doc.file_name || doc.original_name || 'Document'}
+					</a>
+					<button
+						type="button"
+						class="btn btn-ghost btn-xs opacity-0 group-hover:opacity-100 text-error"
+						onclick={() => deleteDoc(doc.id)}
+						disabled={deletingId === doc.id}
+					>
+						{#if deletingId === doc.id}
+							<span class="loading loading-spinner loading-xs"></span>
+						{:else}
+							&#x2715;
+						{/if}
+					</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Upload button -->
+	{#if entityId}
+		<label class="btn btn-ghost btn-sm gap-2 cursor-pointer">
+			{#if uploading}
+				<span class="loading loading-spinner loading-xs"></span>
+				Uploading...
+			{:else}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/>
+				</svg>
+				Add Document
+			{/if}
+			<input type="file" accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png,.webp" multiple class="hidden" onchange={handleFileSelect} disabled={uploading} />
+		</label>
+	{:else}
+		<p class="text-xs text-base-content/30">Save first to add documents</p>
+	{/if}
+</div>
--- a/services/trips/frontend-legacy/src/lib/components/ImageUpload.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/ImageUpload.svelte
@@ -0,0 +1,292 @@
+<script lang="ts">
+	import { post } from '$lib/api/client';
+	import ImmichPicker from './ImmichPicker.svelte';
+
+	let {
+		entityType,
+		entityId,
+		images = [],
+		documents = [],
+		entityName = '',
+		tripStart = '',
+		tripEnd = '',
+		onUpload
+	}: {
+		entityType: string;
+		entityId: string;
+		images: any[];
+		documents?: any[];
+		entityName?: string;
+		tripStart?: string;
+		tripEnd?: string;
+		onUpload: () => void;
+	} = $props();
+
+	let uploading = $state(false);
+	let deletingId = $state('');
+	let showImmich = $state(false);
+	let uploadingDoc = $state(false);
+	let deletingDocId = $state('');
+
+	// Google image search
+	let showSearch = $state(false);
+	let searchQuery = $state('');
+	let searchResults = $state<Array<{ url: string; thumbnail: string; title: string }>>([]);
+	let searching = $state(false);
+	let savingUrl = $state('');
+
+	async function handleFileSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (!input.files?.length || !entityId) return;
+
+		uploading = true;
+		try {
+			for (const file of input.files) {
+				const reader = new FileReader();
+				const base64 = await new Promise<string>((resolve) => {
+					reader.onload = () => resolve(reader.result as string);
+					reader.readAsDataURL(file);
+				});
+
+				await post('/api/image/upload', {
+					entity_type: entityType,
+					entity_id: entityId,
+					image_data: base64,
+					filename: file.name
+				});
+			}
+			onUpload();
+		} catch (e) {
+			console.error('Upload failed:', e);
+		} finally {
+			uploading = false;
+			input.value = '';
+		}
+	}
+
+	async function deleteImage(imageId: string) {
+		deletingId = imageId;
+		try {
+			await post('/api/image/delete', { id: imageId });
+			onUpload();
+		} catch (e) {
+			console.error('Delete failed:', e);
+		} finally {
+			deletingId = '';
+		}
+	}
+
+	async function searchImages() {
+		if (!searchQuery.trim()) return;
+		searching = true;
+		try {
+			const data = await post<{ images: typeof searchResults }>('/api/image/search', { query: searchQuery });
+			searchResults = data.images || [];
+		} catch {
+			searchResults = [];
+		} finally {
+			searching = false;
+		}
+	}
+
+	async function saveFromUrl(url: string) {
+		savingUrl = url;
+		try {
+			await post('/api/image/upload-from-url', {
+				entity_type: entityType,
+				entity_id: entityId,
+				url
+			});
+			onUpload();
+			showSearch = false;
+			searchResults = [];
+		} catch (e) {
+			console.error('Save from URL failed:', e);
+		} finally {
+			savingUrl = '';
+		}
+	}
+
+	function openSearch() {
+		searchQuery = entityName || '';
+		showSearch = true;
+		if (searchQuery) searchImages();
+	}
+
+	async function handleDocSelect(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (!input.files?.length || !entityId) return;
+		uploadingDoc = true;
+		try {
+			for (const file of input.files) {
+				const formData = new FormData();
+				formData.append('entity_type', entityType);
+				formData.append('entity_id', entityId);
+				formData.append('file', file);
+				const token = localStorage.getItem('api_token') || '';
+				await fetch('/api/document/upload', {
+					method: 'POST',
+					headers: { 'Authorization': `Bearer ${token}` },
+					body: formData
+				});
+			}
+			onUpload();
+		} catch (e) { console.error('Doc upload failed:', e); }
+		finally { uploadingDoc = false; input.value = ''; }
+	}
+
+	async function deleteDoc(docId: string) {
+		deletingDocId = docId;
+		try {
+			await post('/api/document/delete', { document_id: docId });
+			onUpload();
+		} catch (e) { console.error('Doc delete failed:', e); }
+		finally { deletingDocId = ''; }
+	}
+</script>
+
+<div class="space-y-3">
+	<!-- Existing images -->
+	{#if images.length > 0}
+		<div class="flex gap-2 overflow-x-auto pb-2">
+			{#each images as img}
+				<div class="relative shrink-0 group">
+					<img src={img.url} alt="" class="h-24 w-32 object-cover rounded-lg" />
+					<button
+						type="button"
+						class="absolute top-1 right-1 btn btn-circle btn-xs bg-error/80 border-0 text-white opacity-0 group-hover:opacity-100 transition-opacity"
+						onclick={() => deleteImage(img.id)}
+						disabled={deletingId === img.id}
+					>
+						{#if deletingId === img.id}
+							<span class="loading loading-spinner loading-xs"></span>
+						{:else}
+							&#x2715;
+						{/if}
+					</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Existing documents -->
+	{#if documents.length > 0}
+		<div class="space-y-1">
+			{#each documents as doc}
+				<div class="flex items-center gap-2 p-1.5 rounded-lg bg-base-300/30 group">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-base-content/40 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>
+					</svg>
+					<a href={doc.url} target="_blank" class="flex-1 text-xs text-base-content/60 hover:text-primary truncate">
+						{doc.file_name || doc.original_name || 'Document'}
+					</a>
+					<button type="button" class="btn btn-ghost btn-xs opacity-0 group-hover:opacity-100 text-error" onclick={() => deleteDoc(doc.id)} disabled={deletingDocId === doc.id}>
+						{#if deletingDocId === doc.id}<span class="loading loading-spinner loading-xs"></span>{:else}&#x2715;{/if}
+					</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Action buttons -->
+	{#if entityId}
+		<div class="flex flex-wrap gap-2 justify-center">
+			<label class="btn btn-ghost btn-sm gap-2 cursor-pointer">
+				{#if uploading}
+					<span class="loading loading-spinner loading-xs"></span>
+					Uploading...
+				{:else}
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+					</svg>
+					Upload
+				{/if}
+				<input type="file" accept="image/*" multiple class="hidden" onchange={handleFileSelect} disabled={uploading} />
+			</label>
+
+			<button type="button" class="btn btn-ghost btn-sm gap-2" onclick={openSearch}>
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+				</svg>
+				Search Web
+			</button>
+
+			<button type="button" class="btn btn-ghost btn-sm gap-2" onclick={() => showImmich = true}>
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+				</svg>
+				Immich
+			</button>
+
+			<label class="btn btn-ghost btn-sm gap-2 cursor-pointer">
+				{#if uploadingDoc}
+					<span class="loading loading-spinner loading-xs"></span>
+				{:else}
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>
+					</svg>
+					Document
+				{/if}
+				<input type="file" accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png,.webp" multiple class="hidden" onchange={handleDocSelect} disabled={uploadingDoc} />
+			</label>
+		</div>
+	{:else}
+		<p class="text-xs text-base-content/30">Save first to add photos</p>
+	{/if}
+
+	<!-- Google Image Search Panel -->
+	{#if showSearch}
+		<div class="border border-base-300 rounded-lg p-3 bg-base-300/30">
+			<div class="flex gap-2 mb-3">
+				<input
+					type="text"
+					class="input input-bordered input-sm flex-1"
+					placeholder="Search for images..."
+					bind:value={searchQuery}
+					onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); searchImages(); } }}
+				/>
+				<button type="button" class="btn btn-sm btn-primary" onclick={searchImages} disabled={searching}>
+					{#if searching}
+						<span class="loading loading-spinner loading-xs"></span>
+					{:else}
+						Search
+					{/if}
+				</button>
+				<button type="button" class="btn btn-sm btn-ghost" onclick={() => { showSearch = false; searchResults = []; }}>
+					&#x2715;
+				</button>
+			</div>
+
+			{#if searchResults.length > 0}
+				<div class="grid grid-cols-3 sm:grid-cols-4 gap-2 max-h-48 overflow-y-auto">
+					{#each searchResults as result}
+						<button
+							type="button"
+							class="relative group aspect-square rounded-lg overflow-hidden bg-base-300 hover:ring-2 hover:ring-primary transition-all"
+							onclick={() => saveFromUrl(result.url)}
+							disabled={savingUrl === result.url}
+						>
+							<img src={result.thumbnail} alt={result.title} class="w-full h-full object-cover" />
+							{#if savingUrl === result.url}
+								<div class="absolute inset-0 bg-black/50 flex items-center justify-center">
+									<span class="loading loading-spinner loading-sm text-white"></span>
+								</div>
+							{:else}
+								<div class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
+									<span class="text-white opacity-0 group-hover:opacity-100 text-xs font-medium">Save</span>
+								</div>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			{:else if !searching && searchQuery}
+				<p class="text-sm text-base-content/40 text-center py-4">No results</p>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Immich Picker -->
+	{#if showImmich && entityId}
+		<ImmichPicker {entityType} {entityId} {tripStart} {tripEnd} onImport={() => { showImmich = false; onUpload(); }} onClose={() => showImmich = false} />
+	{/if}
+</div>
--- a/services/trips/frontend-legacy/src/lib/components/ImmichPicker.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/ImmichPicker.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+	import { post } from '$lib/api/client';
+
+	let {
+		entityType,
+		entityId,
+		tripStart = '',
+		tripEnd = '',
+		onImport,
+		onClose
+	}: {
+		entityType: string;
+		entityId: string;
+		tripStart?: string;
+		tripEnd?: string;
+		onImport: () => void;
+		onClose: () => void;
+	} = $props();
+
+	interface ImmichPhoto {
+		id: string;
+		thumbnail_url: string;
+		filename: string;
+		date: string;
+	}
+
+	let modal = $state<HTMLDialogElement | null>(null);
+	let photos = $state<ImmichPhoto[]>([]);
+	let firstLoad = $state(true);
+	let loadingMore = $state(false);
+	let importing = $state<Set<string>>(new Set());
+	let page = $state(1);
+	let total = $state(0);
+	let hasMore = $state(true);
+	let useTripdates = $state(true);
+	let scrollContainer = $state<HTMLDivElement | null>(null);
+
+	let initialized = false;
+	$effect(() => {
+		if (modal && !initialized) {
+			initialized = true;
+			modal.showModal();
+			fetchPhotos(true);
+		}
+	});
+
+	async function fetchPhotos(reset = false) {
+		if (loadingMore) return;
+
+		if (reset) {
+			page = 1;
+			photos = [];
+			hasMore = true;
+			firstLoad = true;
+		}
+
+		loadingMore = true;
+		try {
+			const body: any = { page, per_page: 30 };
+			if (useTripdates && tripStart) body.start_date = tripStart;
+			if (useTripdates && tripEnd) body.end_date = tripEnd;
+
+			const data = await post<{ photos: ImmichPhoto[]; total: number }>('/api/immich/photos', body);
+			const newPhotos = data.photos || [];
+			total = data.total || 0;
+			hasMore = newPhotos.length >= 30;
+
+			if (reset) {
+				photos = newPhotos;
+			} else {
+				photos = photos.concat(newPhotos);
+			}
+		} catch {
+			hasMore = false;
+		} finally {
+			loadingMore = false;
+			firstLoad = false;
+		}
+	}
+
+	function handleScroll() {
+		if (!scrollContainer || loadingMore || !hasMore) return;
+		const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+		if (scrollHeight - scrollTop - clientHeight < 200) {
+			page++;
+			fetchPhotos();
+		}
+	}
+
+	async function importPhoto(photo: ImmichPhoto) {
+		const next = new Set(importing);
+		next.add(photo.id);
+		importing = next;
+
+		try {
+			await post('/api/immich/download', {
+				asset_id: photo.id,
+				entity_type: entityType,
+				entity_id: entityId
+			});
+			onImport();
+		} catch (e) {
+			console.error('Import failed:', e);
+		}
+
+		const done = new Set(importing);
+		done.delete(photo.id);
+		importing = done;
+	}
+
+	function close() { modal?.close(); onClose(); }
+
+	function toggleDateFilter() {
+		useTripdates = !useTripdates;
+		fetchPhotos(true);
+	}
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
+	<div class="modal-box max-w-3xl max-h-[85vh] flex flex-col">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4 shrink-0">
+			<div class="p-2 rounded-xl bg-primary/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+				</svg>
+			</div>
+			Import from Immich
+		</h3>
+
+		<!-- Filters -->
+		<div class="flex items-center justify-between mb-3 shrink-0">
+			<label class="label cursor-pointer gap-2">
+				<input type="checkbox" class="toggle toggle-sm toggle-primary" checked={useTripdates} onchange={toggleDateFilter} />
+				<span class="label-text text-sm">Trip dates only</span>
+			</label>
+			<span class="text-xs text-base-content/40">{total} photos</span>
+		</div>
+
+		<!-- Content -->
+		{#if firstLoad}
+			<div class="flex justify-center py-12">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+			</div>
+		{:else if photos.length === 0}
+			<div class="text-center py-12 text-base-content/40">No photos found</div>
+		{:else}
+			<div
+				bind:this={scrollContainer}
+				onscroll={handleScroll}
+				class="overflow-y-auto flex-1 min-h-0"
+			>
+				<div class="grid grid-cols-3 sm:grid-cols-4 gap-2 p-1">
+					{#each photos as photo (photo.id)}
+						<button
+							type="button"
+							class="relative aspect-square rounded-lg overflow-hidden bg-base-300 hover:ring-2 hover:ring-primary transition-all"
+							onclick={() => importPhoto(photo)}
+							disabled={importing.has(photo.id)}
+						>
+							<img
+								src="/api/immich/thumb/{photo.id}"
+								alt={photo.filename}
+								class="absolute inset-0 w-full h-full object-cover"
+								loading="lazy"
+							/>
+							{#if importing.has(photo.id)}
+								<div class="absolute inset-0 bg-black/50 flex items-center justify-center">
+									<span class="loading loading-spinner loading-sm text-white"></span>
+								</div>
+							{/if}
+						</button>
+					{/each}
+				</div>
+
+				{#if loadingMore}
+					<div class="flex justify-center py-4">
+						<span class="loading loading-spinner loading-sm text-primary"></span>
+					</div>
+				{/if}
+
+				{#if !hasMore}
+					<div class="text-center py-3 text-xs text-base-content/30">All photos loaded</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
+</dialog>
--- a/services/trips/frontend-legacy/src/lib/components/LocationModal.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/LocationModal.svelte
@@ -0,0 +1,260 @@
+<script lang="ts">
+	import { post } from '$lib/api/client';
+	import type { Location } from '$lib/api/types';
+	import PlacesAutocomplete from './PlacesAutocomplete.svelte';
+	import ImageUpload from './ImageUpload.svelte';
+
+	let {
+		location = null,
+		tripId,
+		tripStart = '',
+		tripEnd = '',
+		onSave,
+		onDelete,
+		onClose
+	}: {
+		location: Location | null;
+		tripId: string;
+		tripStart?: string;
+		tripEnd?: string;
+		onSave: (loc: any) => void;
+		onDelete: (id: string) => void;
+		onClose: () => void;
+	} = $props();
+
+	let modal = $state<HTMLDialogElement | null>(null);
+	let saving = $state(false);
+	let deleting = $state(false);
+	let confirmDelete = $state(false);
+
+	let form = $state({
+		name: '',
+		description: '',
+		category: '',
+		visit_date: '',
+		start_time: '',
+		end_time: '',
+		link: '',
+		cost_points: 0,
+		cost_cash: 0,
+		address: '',
+		place_id: '',
+		hike_distance: '',
+		hike_difficulty: '',
+		hike_time: ''
+	});
+
+	let isEdit = $derived(!!location?.id);
+	let images = $derived((location as any)?.images || []);
+
+	$effect(() => {
+		if (location) {
+			form = {
+				name: location.name || '',
+				description: location.description || '',
+				category: location.category || '',
+				visit_date: location.visit_date || '',
+				start_time: location.start_time || '',
+				end_time: location.end_time || '',
+				link: location.link || '',
+				cost_points: location.cost_points || 0,
+				cost_cash: location.cost_cash || 0,
+				address: location.address || '',
+				place_id: location.place_id || '',
+				hike_distance: location.hike_distance || '',
+				hike_difficulty: location.hike_difficulty || '',
+				hike_time: location.hike_time || ''
+			};
+		}
+		modal?.showModal();
+	});
+
+	async function save() {
+		saving = true;
+		try {
+			const payload = { ...form, trip_id: tripId };
+			if (isEdit) {
+				(payload as any).id = location!.id;
+				await post('/api/location/update', payload);
+			} else {
+				await post('/api/location', payload);
+			}
+			onSave(payload);
+		} catch (e) {
+			console.error('Failed to save location:', e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function doDelete() {
+		if (!location?.id) return;
+		deleting = true;
+		try {
+			await post('/api/location/delete', { id: location.id });
+			onDelete(location.id);
+		} catch (e) {
+			console.error('Failed to delete:', e);
+		} finally {
+			deleting = false;
+		}
+	}
+
+	function close() {
+		modal?.close();
+		onClose();
+	}
+
+	function handleModalRefresh() {
+		// Reload the trip to get updated images
+		onSave({});
+	}
+
+	function stripHtml(html: string): string {
+		if (!html) return '';
+		const div = document.createElement('div');
+		div.innerHTML = html;
+		return div.textContent || '';
+	}
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
+	<div class="modal-box max-w-2xl max-h-[85vh] overflow-y-auto">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4">
+			<div class="p-2 rounded-xl bg-accent/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+				</svg>
+			</div>
+			{isEdit ? 'Edit Activity' : 'New Activity'}
+		</h3>
+
+		<!-- Images -->
+		{#if isEdit}
+			<div class="mb-4">
+				<ImageUpload entityType="location" entityId={location?.id || ''} {images} documents={(location as any)?.documents || []} entityName={form.name} {tripStart} {tripEnd} onUpload={handleModalRefresh} />
+			</div>
+		{/if}
+
+		<form onsubmit={(e) => { e.preventDefault(); save(); }}>
+			<div class="space-y-3">
+				<div class="form-control">
+					<label class="label"><span class="label-text">Name</span></label>
+					<PlacesAutocomplete
+						bind:value={form.name}
+						placeholder="Search for a place..."
+						onSelect={(details) => {
+							form.address = details.address || form.address;
+							form.place_id = details.place_id || form.place_id;
+							if (details.category) form.category = details.category;
+						}}
+					/>
+				</div>
+
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">Category</span></label>
+						<select class="select select-bordered w-full" bind:value={form.category}>
+							<option value="">None</option>
+							<option value="attraction">Attraction</option>
+							<option value="restaurant">Restaurant</option>
+							<option value="cafe">Cafe</option>
+							<option value="bar">Bar</option>
+							<option value="hike">Hike</option>
+							<option value="shopping">Shopping</option>
+							<option value="beach">Beach</option>
+						</select>
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">Date</span></label>
+						<input type="date" class="input input-bordered w-full" bind:value={form.visit_date} />
+					</div>
+				</div>
+
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">Start Time</span></label>
+						<input type="datetime-local" class="input input-bordered w-full" bind:value={form.start_time} />
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">End Time</span></label>
+						<input type="datetime-local" class="input input-bordered w-full" bind:value={form.end_time} />
+					</div>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Description</span></label>
+					<textarea class="textarea textarea-bordered w-full" rows="3" bind:value={form.description}></textarea>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Address</span></label>
+					<input type="text" class="input input-bordered w-full" bind:value={form.address} />
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Link</span></label>
+					<input type="url" class="input input-bordered w-full" bind:value={form.link} placeholder="https://..." />
+				</div>
+
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">Cost (Cash)</span></label>
+						<input type="number" class="input input-bordered w-full" bind:value={form.cost_cash} step="0.01" />
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">Cost (Points)</span></label>
+						<input type="number" class="input input-bordered w-full" bind:value={form.cost_points} />
+					</div>
+				</div>
+
+				{#if form.category === 'hike'}
+					<div class="grid grid-cols-3 gap-3">
+						<div class="form-control">
+							<label class="label"><span class="label-text">Distance</span></label>
+							<input type="text" class="input input-bordered w-full" bind:value={form.hike_distance} placeholder="5.2 mi" />
+						</div>
+						<div class="form-control">
+							<label class="label"><span class="label-text">Difficulty</span></label>
+							<input type="text" class="input input-bordered w-full" bind:value={form.hike_difficulty} placeholder="Moderate" />
+						</div>
+						<div class="form-control">
+							<label class="label"><span class="label-text">Time</span></label>
+							<input type="text" class="input input-bordered w-full" bind:value={form.hike_time} placeholder="3h" />
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			<div class="modal-action flex justify-between">
+				<div>
+					{#if isEdit}
+						{#if confirmDelete}
+							<div class="flex gap-2">
+								<button type="button" class="btn btn-error btn-sm" onclick={doDelete} disabled={deleting}>
+									{#if deleting}<span class="loading loading-spinner loading-xs"></span>{/if}
+									Confirm Delete
+								</button>
+								<button type="button" class="btn btn-ghost btn-sm" onclick={() => confirmDelete = false}>Cancel</button>
+							</div>
+						{:else}
+							<button type="button" class="btn btn-ghost btn-sm text-error" onclick={() => confirmDelete = true}>Delete</button>
+						{/if}
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<button type="button" class="btn btn-ghost" onclick={close}>Cancel</button>
+					<button type="submit" class="btn btn-primary" disabled={saving || !form.name.trim()}>
+						{#if saving}<span class="loading loading-spinner loading-sm"></span>{/if}
+						{isEdit ? 'Save' : 'Create'}
+					</button>
+				</div>
+			</div>
+		</form>
+	</div>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
+</dialog>
--- a/services/trips/frontend-legacy/src/lib/components/LodgingModal.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/LodgingModal.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+	import { post } from '$lib/api/client';
+	import type { Lodging } from '$lib/api/types';
+	import PlacesAutocomplete from './PlacesAutocomplete.svelte';
+	import ImageUpload from './ImageUpload.svelte';
+
+	let {
+		lodging = null,
+		tripId,
+		tripStart = '',
+		tripEnd = '',
+		onSave,
+		onDelete,
+		onClose
+	}: {
+		lodging: Lodging | null;
+		tripId: string;
+		tripStart?: string;
+		tripEnd?: string;
+		onSave: (l: any) => void;
+		onDelete: (id: string) => void;
+		onClose: () => void;
+	} = $props();
+
+	let modal = $state<HTMLDialogElement | null>(null);
+	let saving = $state(false);
+	let deleting = $state(false);
+	let confirmDelete = $state(false);
+
+	let form = $state({
+		name: '', type: 'hotel', location: '', check_in: '', check_out: '',
+		timezone: '', reservation_number: '', description: '', link: '',
+		cost_points: 0, cost_cash: 0, place_id: ''
+	});
+
+	let isEdit = $derived(!!lodging?.id);
+	let images = $derived((lodging as any)?.images || []);
+
+	$effect(() => {
+		if (lodging) {
+			form = {
+				name: lodging.name || '', type: lodging.type || 'hotel',
+				location: lodging.location || '', check_in: lodging.check_in || '',
+				check_out: lodging.check_out || '', timezone: lodging.timezone || '',
+				reservation_number: lodging.reservation_number || '',
+				description: lodging.description || '', link: lodging.link || '',
+				cost_points: lodging.cost_points || 0, cost_cash: lodging.cost_cash || 0,
+				place_id: lodging.place_id || ''
+			};
+		}
+		modal?.showModal();
+	});
+
+	async function save() {
+		saving = true;
+		try {
+			const payload = { ...form, trip_id: tripId };
+			if (isEdit) {
+				(payload as any).id = lodging!.id;
+				await post('/api/lodging/update', payload);
+			} else {
+				await post('/api/lodging', payload);
+			}
+			onSave(payload);
+		} catch (e) { console.error('Failed to save lodging:', e); }
+		finally { saving = false; }
+	}
+
+	async function doDelete() {
+		if (!lodging?.id) return;
+		deleting = true;
+		try {
+			await post('/api/lodging/delete', { id: lodging.id });
+			onDelete(lodging.id);
+		} catch (e) { console.error('Failed to delete:', e); }
+		finally { deleting = false; }
+	}
+
+	function close() { modal?.close(); onClose(); }
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
+	<div class="modal-box max-w-2xl max-h-[85vh] overflow-y-auto">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4">
+			<div class="p-2 rounded-xl bg-secondary/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M3 14h18v7H3z"/><path d="M3 7v7"/><path d="M21 7v7"/><path d="M3 7l9-4 9 4"/>
+				</svg>
+			</div>
+			{isEdit ? 'Edit Lodging' : 'New Lodging'}
+		</h3>
+
+		{#if isEdit}
+			<div class="mb-4">
+				<ImageUpload entityType="lodging" entityId={lodging?.id || ''} {images} documents={(lodging as any)?.documents || []} entityName={form.name} {tripStart} {tripEnd} onUpload={() => onSave({})} />
+			</div>
+		{/if}
+
+		<form onsubmit={(e) => { e.preventDefault(); save(); }}>
+			<div class="space-y-3">
+				<div class="grid grid-cols-3 gap-3">
+					<div class="form-control col-span-2">
+						<label class="label"><span class="label-text">Name</span></label>
+						<PlacesAutocomplete
+							bind:value={form.name}
+							placeholder="Search hotels..."
+							onSelect={(details) => {
+								form.location = details.address || form.location;
+								form.place_id = details.place_id || form.place_id;
+							}}
+						/>
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">Type</span></label>
+						<select class="select select-bordered w-full" bind:value={form.type}>
+							<option value="hotel">Hotel</option>
+							<option value="airbnb">Airbnb</option>
+							<option value="hostel">Hostel</option>
+							<option value="resort">Resort</option>
+							<option value="camping">Camping</option>
+						</select>
+					</div>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Location / Address</span></label>
+					<input type="text" class="input input-bordered w-full" bind:value={form.location} />
+				</div>
+
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">Check-in</span></label>
+						<input type="datetime-local" class="input input-bordered w-full" bind:value={form.check_in} />
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">Check-out</span></label>
+						<input type="datetime-local" class="input input-bordered w-full" bind:value={form.check_out} />
+					</div>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Confirmation / Reservation #</span></label>
+					<input type="text" class="input input-bordered w-full" bind:value={form.reservation_number} />
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Description</span></label>
+					<textarea class="textarea textarea-bordered w-full" rows="2" bind:value={form.description}></textarea>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Link</span></label>
+					<input type="url" class="input input-bordered w-full" bind:value={form.link} placeholder="https://..." />
+				</div>
+
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">Cost (Cash)</span></label>
+						<input type="number" class="input input-bordered w-full" bind:value={form.cost_cash} step="0.01" />
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">Cost (Points)</span></label>
+						<input type="number" class="input input-bordered w-full" bind:value={form.cost_points} />
+					</div>
+				</div>
+			</div>
+
+			<div class="modal-action flex justify-between">
+				<div>
+					{#if isEdit}
+						{#if confirmDelete}
+							<div class="flex gap-2">
+								<button type="button" class="btn btn-error btn-sm" onclick={doDelete} disabled={deleting}>
+									{#if deleting}<span class="loading loading-spinner loading-xs"></span>{/if}
+									Confirm Delete
+								</button>
+								<button type="button" class="btn btn-ghost btn-sm" onclick={() => confirmDelete = false}>Cancel</button>
+							</div>
+						{:else}
+							<button type="button" class="btn btn-ghost btn-sm text-error" onclick={() => confirmDelete = true}>Delete</button>
+						{/if}
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<button type="button" class="btn btn-ghost" onclick={close}>Cancel</button>
+					<button type="submit" class="btn btn-primary" disabled={saving || !form.name.trim()}>
+						{#if saving}<span class="loading loading-spinner loading-sm"></span>{/if}
+						{isEdit ? 'Save' : 'Create'}
+					</button>
+				</div>
+			</div>
+		</form>
+	</div>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
+</dialog>
--- a/services/trips/frontend-legacy/src/lib/components/MapsButton.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/MapsButton.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	let {
+		lat = null,
+		lng = null,
+		name = '',
+		address = '',
+		placeId = ''
+	}: {
+		lat?: number | null;
+		lng?: number | null;
+		name?: string;
+		address?: string;
+		placeId?: string;
+	} = $props();
+
+	let showPicker = $state(false);
+
+	function openGoogle(e: Event) {
+		e.stopPropagation();
+		let url;
+		if (lat && lng) {
+			url = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
+		} else if (address) {
+			url = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(address)}`;
+		} else if (placeId) {
+			url = `https://www.google.com/maps/dir/?api=1&destination=place_id:${placeId}`;
+		} else {
+			url = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(name)}`;
+		}
+		window.open(url, '_blank');
+		showPicker = false;
+	}
+
+	function openApple(e: Event) {
+		e.stopPropagation();
+		let url;
+		if (address) {
+			url = `https://maps.apple.com/?daddr=${encodeURIComponent(address)}&dirflg=d`;
+		} else if (lat && lng) {
+			url = `https://maps.apple.com/?daddr=${lat},${lng}&dirflg=d`;
+		} else {
+			url = `https://maps.apple.com/?q=${encodeURIComponent(name)}`;
+		}
+		window.open(url, '_blank');
+		showPicker = false;
+	}
+
+	function toggle(e: Event) {
+		e.stopPropagation();
+		showPicker = !showPicker;
+	}
+</script>
+
+<div class="relative">
+	<button
+		type="button"
+		class="btn btn-ghost btn-xs gap-1 text-base-content/40 hover:text-primary"
+		onclick={toggle}
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+			<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+		</svg>
+		Maps
+	</button>
+
+	{#if showPicker}
+		<div class="absolute bottom-full right-0 mb-1 bg-base-200 border border-base-300 rounded-lg shadow-xl z-50 overflow-hidden">
+			<button class="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-base-300 transition-colors text-sm whitespace-nowrap" onclick={openGoogle}>
+				<span class="text-base">G</span> Google Maps
+			</button>
+			<button class="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-base-300 transition-colors text-sm whitespace-nowrap" onclick={openApple}>
+				<span class="text-base">A</span> Apple Maps
+			</button>
+		</div>
+	{/if}
+</div>
+
+{#if showPicker}
+	<div class="fixed inset-0 z-40" onclick={(e) => { e.stopPropagation(); showPicker = false; }}></div>
+{/if}
--- a/services/trips/frontend-legacy/src/lib/components/Navbar.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/Navbar.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	let theme = $state('night');
+
+	function toggleTheme() {
+		theme = theme === 'night' ? 'light' : 'night';
+		document.documentElement.setAttribute('data-theme', theme);
+		localStorage.setItem('theme', theme);
+	}
+
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			const saved = localStorage.getItem('theme');
+			if (saved) {
+				theme = saved;
+				document.documentElement.setAttribute('data-theme', saved);
+			}
+		}
+	});
+</script>
+
+<div class="navbar bg-base-200/80 backdrop-blur-md sticky top-0 z-50 border-b border-base-300 px-4">
+	<div class="flex-1">
+		<a href="/" class="flex items-center gap-2 text-xl font-bold text-primary hover:opacity-80 transition-opacity">
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/>
+				<path d="M9 4v13"/>
+				<path d="M15 7v13"/>
+			</svg>
+			Trips
+		</a>
+	</div>
+	<div class="flex-none flex items-center gap-2">
+		<!-- Theme toggle -->
+		<label class="swap swap-rotate btn btn-ghost btn-circle">
+			<input type="checkbox" checked={theme === 'light'} onchange={toggleTheme} />
+			<!-- sun -->
+			<svg class="swap-on h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/>
+			</svg>
+			<!-- moon -->
+			<svg class="swap-off h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
+			</svg>
+		</label>
+		<!-- Settings/menu -->
+		<div class="dropdown dropdown-end">
+			<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
+				<div class="w-8 rounded-full bg-primary/20 flex items-center justify-center">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
+						<circle cx="12" cy="7" r="4"/>
+					</svg>
+				</div>
+			</div>
+			<ul tabindex="0" class="dropdown-content menu bg-base-200 rounded-box z-[1] w-52 p-2 shadow-lg border border-base-300 mt-2">
+				<li><a href="/">Dashboard</a></li>
+				<li><a href="/settings">Settings</a></li>
+			</ul>
+		</div>
+	</div>
+</div>
--- a/services/trips/frontend-legacy/src/lib/components/NoteModal.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/NoteModal.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { post } from '$lib/api/client';
+	import type { Note } from '$lib/api/types';
+
+	let {
+		note = null,
+		tripId,
+		onSave,
+		onDelete,
+		onClose
+	}: {
+		note: Note | null;
+		tripId: string;
+		onSave: (n: any) => void;
+		onDelete: (id: string) => void;
+		onClose: () => void;
+	} = $props();
+
+	let modal = $state<HTMLDialogElement | null>(null);
+	let saving = $state(false);
+	let deleting = $state(false);
+	let confirmDelete = $state(false);
+
+	let form = $state({ name: '', content: '', date: '' });
+	let isEdit = $derived(!!note?.id);
+
+	$effect(() => {
+		if (note) {
+			form = {
+				name: note.name || '',
+				content: note.content || '',
+				date: note.date || ''
+			};
+		}
+		modal?.showModal();
+	});
+
+	async function save() {
+		saving = true;
+		try {
+			const payload = { ...form, trip_id: tripId };
+			if (isEdit) {
+				(payload as any).id = note!.id;
+				await post('/api/note/update', payload);
+			} else {
+				await post('/api/note', payload);
+			}
+			onSave(payload);
+		} catch (e) { console.error('Failed to save note:', e); }
+		finally { saving = false; }
+	}
+
+	async function doDelete() {
+		if (!note?.id) return;
+		deleting = true;
+		try {
+			await post('/api/note/delete', { id: note.id });
+			onDelete(note.id);
+		} catch (e) { console.error('Failed to delete:', e); }
+		finally { deleting = false; }
+	}
+
+	function close() { modal?.close(); onClose(); }
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
+	<div class="modal-box max-w-2xl max-h-[85vh] overflow-y-auto">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4">
+			<div class="p-2 rounded-xl bg-warning/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>
+				</svg>
+			</div>
+			{isEdit ? 'Edit Note' : 'New Note'}
+		</h3>
+
+		<form onsubmit={(e) => { e.preventDefault(); save(); }}>
+			<div class="space-y-3">
+				<div class="grid grid-cols-3 gap-3">
+					<div class="form-control col-span-2">
+						<label class="label"><span class="label-text">Title</span></label>
+						<input type="text" class="input input-bordered w-full" bind:value={form.name} required />
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">Date</span></label>
+						<input type="date" class="input input-bordered w-full" bind:value={form.date} />
+					</div>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Content</span></label>
+					<textarea class="textarea textarea-bordered w-full" rows="8" bind:value={form.content}></textarea>
+				</div>
+			</div>
+
+			<div class="modal-action flex justify-between">
+				<div>
+					{#if isEdit}
+						{#if confirmDelete}
+							<div class="flex gap-2">
+								<button type="button" class="btn btn-error btn-sm" onclick={doDelete} disabled={deleting}>
+									{#if deleting}<span class="loading loading-spinner loading-xs"></span>{/if}
+									Confirm Delete
+								</button>
+								<button type="button" class="btn btn-ghost btn-sm" onclick={() => confirmDelete = false}>Cancel</button>
+							</div>
+						{:else}
+							<button type="button" class="btn btn-ghost btn-sm text-error" onclick={() => confirmDelete = true}>Delete</button>
+						{/if}
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<button type="button" class="btn btn-ghost" onclick={close}>Cancel</button>
+					<button type="submit" class="btn btn-primary" disabled={saving || !form.name.trim()}>
+						{#if saving}<span class="loading loading-spinner loading-sm"></span>{/if}
+						{isEdit ? 'Save' : 'Create'}
+					</button>
+				</div>
+			</div>
+		</form>
+	</div>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
+</dialog>
--- a/services/trips/frontend-legacy/src/lib/components/ParseModal.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/ParseModal.svelte
@@ -0,0 +1,272 @@
+<script lang="ts">
+	import { post, api } from '$lib/api/client';
+
+	let {
+		tripId,
+		tripStart = '',
+		tripEnd = '',
+		onParsed,
+		onClose
+	}: {
+		tripId: string;
+		tripStart?: string;
+		tripEnd?: string;
+		onParsed: () => void;
+		onClose: () => void;
+	} = $props();
+
+	let modal = $state<HTMLDialogElement | null>(null);
+	let textInput = $state('');
+	let parsing = $state(false);
+	let saving = $state(false);
+	let result = $state<any>(null);
+	let error = $state('');
+	let fileInput = $state<HTMLInputElement | null>(null);
+
+	$effect(() => { modal?.showModal(); });
+
+	async function parseText() {
+		if (!textInput.trim()) return;
+		parsing = true;
+		error = '';
+		result = null;
+		try {
+			result = await post('/api/parse', {
+				text: textInput,
+				trip_start: tripStart,
+				trip_end: tripEnd
+			});
+			if (result.error) {
+				error = result.error;
+				result = null;
+			}
+		} catch (e) {
+			error = 'Parse failed';
+		} finally {
+			parsing = false;
+		}
+	}
+
+	async function parseFile(e: Event) {
+		const input = e.target as HTMLInputElement;
+		if (!input.files?.length) return;
+
+		parsing = true;
+		error = '';
+		result = null;
+
+		const formData = new FormData();
+		formData.append('file', input.files[0]);
+		formData.append('text', textInput || '');
+		if (tripStart) formData.append('trip_start', tripStart);
+		if (tripEnd) formData.append('trip_end', tripEnd);
+
+		try {
+			const token = localStorage.getItem('api_token') || '';
+			const res = await fetch('/api/parse', {
+				method: 'POST',
+				headers: { 'Authorization': `Bearer ${token}` },
+				body: formData
+			});
+			result = await res.json();
+			if (result.error) {
+				error = result.error;
+				result = null;
+			}
+		} catch {
+			error = 'Parse failed';
+		} finally {
+			parsing = false;
+			input.value = '';
+		}
+	}
+
+	async function resolvePlaceId(name: string, address: string): Promise<{ place_id?: string; address?: string }> {
+		try {
+			const query = address ? `${name} ${address}` : name;
+			const acData = await post<{ predictions: Array<{ place_id: string; address: string }> }>(
+				'/api/places/autocomplete', { query }
+			);
+			if (acData.predictions?.length > 0) {
+				const placeId = acData.predictions[0].place_id;
+				// Get full details for coordinates
+				const token = localStorage.getItem('api_token') || '';
+				const res = await fetch(`/api/places/details?place_id=${encodeURIComponent(placeId)}`, {
+					headers: { 'Authorization': `Bearer ${token}` }
+				});
+				const details = await res.json();
+				return {
+					place_id: placeId,
+					address: details.address || acData.predictions[0].address || address
+				};
+			}
+		} catch { /* ignore */ }
+		return {};
+	}
+
+	async function saveResult() {
+		if (!result?.data) return;
+		saving = true;
+		try {
+			const data = { ...result.data, trip_id: tripId };
+			const type = result.type;
+
+			// Resolve place_id for locations and lodging
+			if (type === 'location' || type === 'activity' || type === 'hotel' || type === 'lodging') {
+				const place = await resolvePlaceId(data.name || '', data.address || data.location || '');
+				if (place.place_id) data.place_id = place.place_id;
+				if (place.address) {
+					if (type === 'hotel' || type === 'lodging') {
+						data.location = place.address;
+					} else {
+						data.address = place.address;
+					}
+				}
+			}
+
+			// Resolve from/to place_ids for transport
+			if (type === 'flight' || type === 'transportation' || type === 'car' || type === 'train') {
+				if (data.from_location) {
+					const from = await resolvePlaceId(data.from_location, '');
+					if (from.place_id) data.from_place_id = from.place_id;
+				}
+				if (data.to_location) {
+					const to = await resolvePlaceId(data.to_location, '');
+					if (to.place_id) data.to_place_id = to.place_id;
+				}
+			}
+
+			if (type === 'flight' || type === 'transportation' || type === 'car' || type === 'train') {
+				await post('/api/transportation', data);
+			} else if (type === 'hotel' || type === 'lodging') {
+				await post('/api/lodging', data);
+			} else if (type === 'location' || type === 'activity') {
+				await post('/api/location', data);
+			} else {
+				// Default to note
+				await post('/api/note', {
+					trip_id: tripId,
+					name: data.name || 'Parsed Note',
+					content: JSON.stringify(data, null, 2),
+					date: data.date?.split('T')[0] || ''
+				});
+			}
+			onParsed();
+		} catch (e) {
+			console.error('Save failed:', e);
+			error = 'Failed to save';
+		} finally {
+			saving = false;
+		}
+	}
+
+	function typeLabel(type: string): string {
+		switch (type) {
+			case 'flight': return 'Flight';
+			case 'hotel': case 'lodging': return 'Hotel';
+			case 'location': case 'activity': return 'Activity';
+			case 'car': return 'Car Rental';
+			case 'train': return 'Train';
+			default: return type || 'Unknown';
+		}
+	}
+
+	function close() { modal?.close(); onClose(); }
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
+	<div class="modal-box max-w-2xl max-h-[85vh] overflow-y-auto">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4">
+			<div class="p-2 rounded-xl bg-primary/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+				</svg>
+			</div>
+			AI Parse
+		</h3>
+
+		{#if !result}
+			<!-- Input -->
+			<div class="space-y-3">
+				<div class="form-control">
+					<label class="label"><span class="label-text">Paste confirmation email, booking text, or details</span></label>
+					<textarea
+						class="textarea textarea-bordered w-full"
+						rows="6"
+						placeholder="Paste flight confirmation, hotel booking, activity details..."
+						bind:value={textInput}
+					></textarea>
+				</div>
+
+				<div class="flex gap-2">
+					<button type="button" class="btn btn-primary flex-1" onclick={parseText} disabled={parsing || !textInput.trim()}>
+						{#if parsing}
+							<span class="loading loading-spinner loading-sm"></span>
+							Parsing...
+						{:else}
+							Parse Text
+						{/if}
+					</button>
+
+					<label class="btn btn-outline flex-1 cursor-pointer">
+						{#if parsing}
+							<span class="loading loading-spinner loading-sm"></span>
+						{:else}
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>
+							</svg>
+							Upload PDF / Image
+						{/if}
+						<input type="file" accept="image/*,.pdf" class="hidden" bind:this={fileInput} onchange={parseFile} disabled={parsing} />
+					</label>
+				</div>
+
+				{#if error}
+					<div class="alert alert-error text-sm py-2"><span>{error}</span></div>
+				{/if}
+			</div>
+		{:else}
+			<!-- Result preview -->
+			<div class="space-y-4">
+				<div class="flex items-center gap-2">
+					<span class="badge badge-primary">{typeLabel(result.type)}</span>
+					{#if result.confidence}
+						<span class="text-xs text-base-content/40">{Math.round(result.confidence * 100)}% confident</span>
+					{/if}
+				</div>
+
+				<div class="bg-base-200 rounded-lg p-4 space-y-2">
+					{#each Object.entries(result.data || {}) as [key, value]}
+						{#if value && key !== 'type'}
+							<div class="flex justify-between text-sm">
+								<span class="text-base-content/50 capitalize">{key.replace(/_/g, ' ')}</span>
+								<span class="text-base-content font-medium text-right max-w-xs truncate">{value}</span>
+							</div>
+						{/if}
+					{/each}
+				</div>
+
+				{#if error}
+					<div class="alert alert-error text-sm py-2"><span>{error}</span></div>
+				{/if}
+
+				<div class="flex gap-2">
+					<button type="button" class="btn btn-ghost flex-1" onclick={() => { result = null; error = ''; }}>
+						Back
+					</button>
+					<button type="button" class="btn btn-primary flex-1" onclick={saveResult} disabled={saving}>
+						{#if saving}
+							<span class="loading loading-spinner loading-sm"></span>
+						{/if}
+						Save to Trip
+					</button>
+				</div>
+			</div>
+		{/if}
+	</div>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
+</dialog>
--- a/services/trips/frontend-legacy/src/lib/components/PlacesAutocomplete.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/PlacesAutocomplete.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { post } from '$lib/api/client';
+
+	interface Prediction {
+		place_id: string;
+		name: string;
+		address: string;
+		description: string;
+		types: string[];
+	}
+
+	interface PlaceDetails {
+		name: string;
+		address: string;
+		latitude: number | null;
+		longitude: number | null;
+		types: string[];
+		category: string;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Search for a place...',
+		onSelect
+	}: {
+		value: string;
+		placeholder?: string;
+		onSelect: (details: PlaceDetails & { place_id: string }) => void;
+	} = $props();
+
+	let predictions = $state<Prediction[]>([]);
+	let showDropdown = $state(false);
+	let debounceTimer: ReturnType<typeof setTimeout>;
+
+	async function search(query: string) {
+		if (query.length < 2) {
+			predictions = [];
+			showDropdown = false;
+			return;
+		}
+		try {
+			const data = await post<{ predictions: Prediction[] }>('/api/places/autocomplete', { query });
+			predictions = data.predictions || [];
+			showDropdown = predictions.length > 0;
+		} catch {
+			predictions = [];
+		}
+	}
+
+	function onInput() {
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => search(value), 250);
+	}
+
+	async function selectPlace(pred: Prediction) {
+		showDropdown = false;
+		value = pred.name;
+
+		// Fetch full details
+		try {
+			const res = await fetch(`/api/places/details?place_id=${encodeURIComponent(pred.place_id)}`, {
+				headers: { 'Authorization': `Bearer ${localStorage.getItem('api_token') || ''}` }
+			});
+			const details: PlaceDetails = await res.json();
+			onSelect({ ...details, place_id: pred.place_id });
+		} catch {
+			// Fallback with autocomplete data
+			onSelect({
+				place_id: pred.place_id,
+				name: pred.name,
+				address: pred.address,
+				latitude: null,
+				longitude: null,
+				types: pred.types,
+				category: ''
+			});
+		}
+	}
+</script>
+
+<div class="relative">
+	<input
+		type="text"
+		class="input input-bordered w-full"
+		{placeholder}
+		bind:value
+		oninput={onInput}
+		onfocus={() => { if (predictions.length > 0) showDropdown = true; }}
+		onblur={() => setTimeout(() => showDropdown = false, 200)}
+	/>
+	{#if showDropdown}
+		<div class="absolute top-full left-0 right-0 mt-1 bg-base-200 border border-base-300 rounded-box shadow-xl z-50 max-h-48 overflow-y-auto">
+			{#each predictions as pred}
+				<button
+					class="w-full flex flex-col p-3 hover:bg-base-300 transition-colors text-left"
+					onmousedown={() => selectPlace(pred)}
+				>
+					<span class="font-medium text-sm text-base-content">{pred.name}</span>
+					{#if pred.address}
+						<span class="text-xs text-base-content/40">{pred.address}</span>
+					{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
--- a/services/trips/frontend-legacy/src/lib/components/StatsBar.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/StatsBar.svelte
@@ -0,0 +1,306 @@
+<script lang="ts">
+	import { get } from '$lib/api/client';
+
+	interface TripSummary {
+		id: string;
+		name: string;
+		start_date: string;
+		end_date: string;
+	}
+
+	interface Stats {
+		total_trips: number;
+		cities_visited: number;
+		countries_visited: number;
+		total_points_redeemed: number;
+		total_activities: number;
+		trips_by_year: Record<string, TripSummary[]>;
+		cities_by_country: Record<string, string[]>;
+		points_by_year: Record<string, number>;
+		points_by_category: { flights: number; hotels: number; activities: number };
+	}
+
+	let stats = $state<Stats | null>(null);
+
+	let tripsModal = $state<HTMLDialogElement | null>(null);
+	let citiesModal = $state<HTMLDialogElement | null>(null);
+	let countriesModal = $state<HTMLDialogElement | null>(null);
+	let pointsModal = $state<HTMLDialogElement | null>(null);
+
+	$effect(() => {
+		loadStats();
+	});
+
+	async function loadStats() {
+		try {
+			stats = await get<Stats>('/api/stats');
+		} catch (e) {
+			console.error('Failed to load stats:', e);
+		}
+	}
+
+	function formatNumber(n: number): string {
+		return n.toLocaleString();
+	}
+
+	function formatDate(d: string): string {
+		if (!d) return '';
+		const date = new Date(d + 'T00:00:00');
+		return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+	}
+
+	function formatDateRange(start: string, end: string): string {
+		if (!start) return '';
+		const s = formatDate(start);
+		const e = end ? formatDate(end) : '';
+		return e ? `${s} - ${e}` : s;
+	}
+
+	function maxPoints(): number {
+		if (!stats?.points_by_year) return 1;
+		return Math.max(...Object.values(stats.points_by_year), 1);
+	}
+
+	function maxCategoryPoints(): number {
+		if (!stats?.points_by_category) return 1;
+		return Math.max(...Object.values(stats.points_by_category), 1);
+	}
+</script>
+
+{#if stats}
+	<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+		<!-- Total Trips -->
+		<div
+			class="card bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer"
+			onclick={() => tripsModal?.showModal()}
+		>
+			<div class="card-body p-4 flex flex-row items-center gap-3">
+				<div class="p-3 rounded-2xl bg-primary/15">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/><path d="M9 4v13"/><path d="M15 7v13"/>
+					</svg>
+				</div>
+				<div>
+					<div class="text-2xl font-bold text-base-content">{formatNumber(stats.total_trips)}</div>
+					<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Trips</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Cities Visited -->
+		<div
+			class="card bg-gradient-to-br from-info/10 to-info/5 border border-info/20 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer"
+			onclick={() => citiesModal?.showModal()}
+		>
+			<div class="card-body p-4 flex flex-row items-center gap-3">
+				<div class="p-3 rounded-2xl bg-info/15">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/><path d="M9 9h.01"/><path d="M9 12h.01"/><path d="M9 15h.01"/><path d="M9 18h.01"/>
+					</svg>
+				</div>
+				<div>
+					<div class="text-2xl font-bold text-base-content">{formatNumber(stats.cities_visited)}</div>
+					<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Cities Visited</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Countries Visited -->
+		<div
+			class="card bg-gradient-to-br from-success/10 to-success/5 border border-success/20 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer"
+			onclick={() => countriesModal?.showModal()}
+		>
+			<div class="card-body p-4 flex flex-row items-center gap-3">
+				<div class="p-3 rounded-2xl bg-success/15">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>
+					</svg>
+				</div>
+				<div>
+					<div class="text-2xl font-bold text-base-content">{formatNumber(stats.countries_visited)}</div>
+					<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Countries</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Points Redeemed -->
+		<div
+			class="card bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 shadow-md hover:shadow-xl transition-shadow duration-300 cursor-pointer"
+			onclick={() => pointsModal?.showModal()}
+		>
+			<div class="card-body p-4 flex flex-row items-center gap-3">
+				<div class="p-3 rounded-2xl bg-accent/15">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+					</svg>
+				</div>
+				<div>
+					<div class="text-2xl font-bold text-base-content">{formatNumber(stats.total_points_redeemed)}</div>
+					<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Miles Redeemed</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Trips Modal -->
+	<dialog bind:this={tripsModal} class="modal modal-bottom sm:modal-middle">
+		<div class="modal-box max-w-2xl">
+			<form method="dialog">
+				<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+			</form>
+			<h3 class="font-bold text-lg flex items-center gap-2">
+				<div class="p-2 rounded-xl bg-primary/15">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/><path d="M9 4v13"/><path d="M15 7v13"/>
+					</svg>
+				</div>
+				Trips
+				<span class="badge badge-primary">{stats.total_trips}</span>
+			</h3>
+			<div class="mt-4 max-h-[60vh] overflow-y-auto">
+				{#each Object.entries(stats.trips_by_year) as [year, trips]}
+					<div class="divider text-base-content/50 text-sm">{year}</div>
+					<div class="space-y-2">
+						{#each trips as trip}
+							<a
+								href="/trip/{trip.id}"
+								class="flex items-center justify-between p-3 rounded-lg bg-base-200/50 hover:bg-base-200 transition-colors"
+								onclick={() => tripsModal?.close()}
+							>
+								<span class="font-medium">{trip.name}</span>
+								<span class="text-sm text-base-content/50">{formatDateRange(trip.start_date, trip.end_date)}</span>
+							</a>
+						{/each}
+					</div>
+				{/each}
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	</dialog>
+
+	<!-- Cities Modal -->
+	<dialog bind:this={citiesModal} class="modal modal-bottom sm:modal-middle">
+		<div class="modal-box max-w-2xl">
+			<form method="dialog">
+				<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+			</form>
+			<h3 class="font-bold text-lg flex items-center gap-2">
+				<div class="p-2 rounded-xl bg-info/15">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/><path d="M9 9h.01"/><path d="M9 12h.01"/><path d="M9 15h.01"/><path d="M9 18h.01"/>
+					</svg>
+				</div>
+				Cities Visited
+				<span class="badge badge-info">{stats.cities_visited}</span>
+			</h3>
+			<div class="mt-4 max-h-[60vh] overflow-y-auto">
+				{#each Object.entries(stats.cities_by_country) as [country, cities]}
+					<div class="divider text-base-content/50 text-sm">{country}</div>
+					<div class="flex flex-wrap gap-2">
+						{#each cities as city}
+							<span class="badge badge-outline badge-lg">{city}</span>
+						{/each}
+					</div>
+				{/each}
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	</dialog>
+
+	<!-- Countries Modal -->
+	<dialog bind:this={countriesModal} class="modal modal-bottom sm:modal-middle">
+		<div class="modal-box max-w-2xl">
+			<form method="dialog">
+				<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+			</form>
+			<h3 class="font-bold text-lg flex items-center gap-2">
+				<div class="p-2 rounded-xl bg-success/15">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>
+					</svg>
+				</div>
+				Countries Visited
+				<span class="badge badge-success">{stats.countries_visited}</span>
+			</h3>
+			<div class="mt-4 max-h-[60vh] overflow-y-auto space-y-2">
+				{#each Object.entries(stats.cities_by_country) as [country, cities]}
+					<div class="flex items-center justify-between p-3 rounded-lg bg-base-200/50">
+						<span class="font-medium">{country}</span>
+						<span class="badge badge-success badge-outline">{cities.length} {cities.length === 1 ? 'city' : 'cities'}</span>
+					</div>
+				{/each}
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	</dialog>
+
+	<!-- Points Modal -->
+	<dialog bind:this={pointsModal} class="modal modal-bottom sm:modal-middle">
+		<div class="modal-box max-w-2xl">
+			<form method="dialog">
+				<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+			</form>
+			<h3 class="font-bold text-lg flex items-center gap-2">
+				<div class="p-2 rounded-xl bg-accent/15">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+					</svg>
+				</div>
+				Miles Redeemed
+				<span class="badge badge-accent">{formatNumber(stats.total_points_redeemed)}</span>
+			</h3>
+			<div class="mt-4 max-h-[60vh] overflow-y-auto">
+				<!-- By Year -->
+				<div class="divider text-base-content/50 text-sm">By Year</div>
+				<div class="space-y-3">
+					{#each Object.entries(stats.points_by_year) as [year, points]}
+						<div>
+							<div class="flex justify-between text-sm mb-1">
+								<span class="font-medium">{year}</span>
+								<span class="text-base-content/70">{formatNumber(points)}</span>
+							</div>
+							<div class="w-full bg-base-200 rounded-full h-3">
+								<div
+									class="bg-accent rounded-full h-3 transition-all duration-500"
+									style="width: {(points / maxPoints()) * 100}%"
+								></div>
+							</div>
+						</div>
+					{/each}
+				</div>
+
+				<!-- By Category -->
+				<div class="divider text-base-content/50 text-sm">By Category</div>
+				<div class="space-y-3">
+					{#each [
+						{ key: 'flights', label: 'Flights', color: 'bg-primary' },
+						{ key: 'hotels', label: 'Hotels', color: 'bg-secondary' },
+						{ key: 'activities', label: 'Activities', color: 'bg-success' }
+					] as cat}
+						<div>
+							<div class="flex justify-between text-sm mb-1">
+								<span class="font-medium">{cat.label}</span>
+								<span class="text-base-content/70">{formatNumber(stats.points_by_category[cat.key as keyof typeof stats.points_by_category])}</span>
+							</div>
+							<div class="w-full bg-base-200 rounded-full h-3">
+								<div
+									class="{cat.color} rounded-full h-3 transition-all duration-500"
+									style="width: {(stats.points_by_category[cat.key as keyof typeof stats.points_by_category] / maxCategoryPoints()) * 100}%"
+								></div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	</dialog>
+{/if}
--- a/services/trips/frontend-legacy/src/lib/components/TransportModal.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/TransportModal.svelte
@@ -0,0 +1,240 @@
+<script lang="ts">
+	import { post } from '$lib/api/client';
+	import type { Transportation } from '$lib/api/types';
+	import PlacesAutocomplete from './PlacesAutocomplete.svelte';
+	import ImageUpload from './ImageUpload.svelte';
+
+	let {
+		transport = null,
+		tripId,
+		tripStart = '',
+		tripEnd = '',
+		onSave,
+		onDelete,
+		onClose
+	}: {
+		transport: Transportation | null;
+		tripId: string;
+		tripStart?: string;
+		tripEnd?: string;
+		onSave: (t: any) => void;
+		onDelete: (id: string) => void;
+		onClose: () => void;
+	} = $props();
+
+	let modal = $state<HTMLDialogElement | null>(null);
+	let saving = $state(false);
+	let deleting = $state(false);
+	let confirmDelete = $state(false);
+	let flightStatus = $state<any>(null);
+	let checkingFlight = $state(false);
+
+	let form = $state({
+		name: '', type: 'plane', flight_number: '', from_location: '', to_location: '',
+		date: '', end_date: '', timezone: '', description: '', link: '',
+		cost_points: 0, cost_cash: 0, from_place_id: '', to_place_id: ''
+	});
+
+	let isEdit = $derived(!!transport?.id);
+	let images = $derived((transport as any)?.images || []);
+
+	$effect(() => {
+		if (transport) {
+			form = {
+				name: transport.name || '', type: transport.type || 'plane',
+				flight_number: transport.flight_number || '',
+				from_location: transport.from_location || '', to_location: transport.to_location || '',
+				date: transport.date || '', end_date: transport.end_date || '',
+				timezone: transport.timezone || '', description: transport.description || '',
+				link: transport.link || '', cost_points: transport.cost_points || 0,
+				cost_cash: transport.cost_cash || 0,
+				from_place_id: transport.from_place_id || '', to_place_id: transport.to_place_id || ''
+			};
+		}
+		modal?.showModal();
+	});
+
+	async function save() {
+		saving = true;
+		try {
+			const payload = { ...form, trip_id: tripId };
+			if (isEdit) {
+				(payload as any).id = transport!.id;
+				await post('/api/transportation/update', payload);
+			} else {
+				await post('/api/transportation', payload);
+			}
+			onSave(payload);
+		} catch (e) { console.error('Failed to save transport:', e); }
+		finally { saving = false; }
+	}
+
+	async function doDelete() {
+		if (!transport?.id) return;
+		deleting = true;
+		try {
+			await post('/api/transportation/delete', { id: transport.id });
+			onDelete(transport.id);
+		} catch (e) { console.error('Failed to delete:', e); }
+		finally { deleting = false; }
+	}
+
+	async function checkFlightStatus() {
+		if (!form.flight_number) return;
+		checkingFlight = true;
+		try {
+			flightStatus = await post('/api/flight-status', {
+				flight_number: form.flight_number,
+				date: form.date?.split('T')[0] || ''
+			});
+		} catch { flightStatus = { error: 'Failed to check status' }; }
+		finally { checkingFlight = false; }
+	}
+
+	function close() { modal?.close(); onClose(); }
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
+	<div class="modal-box max-w-2xl max-h-[85vh] overflow-y-auto">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4">
+			<div class="p-2 rounded-xl bg-info/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M22 16.21v-1.895L14 8.42V4a2 2 0 1 0-4 0v4.42L2 14.315v1.895l8-2.526V18l-2 1.5V21l4-1 4 1v-1.5L16 18v-4.316z"/>
+				</svg>
+			</div>
+			{isEdit ? 'Edit Transport' : 'New Transport'}
+		</h3>
+
+		{#if isEdit}
+			<div class="mb-4">
+				<ImageUpload entityType="transportation" entityId={transport?.id || ''} {images} documents={(transport as any)?.documents || []} entityName={form.name || form.flight_number || ''} {tripStart} {tripEnd} onUpload={() => onSave({})} />
+			</div>
+		{/if}
+
+		<form onsubmit={(e) => { e.preventDefault(); save(); }}>
+			<div class="space-y-3">
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">Name</span></label>
+						<input type="text" class="input input-bordered w-full" bind:value={form.name} placeholder="e.g. United Airlines" />
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">Type</span></label>
+						<select class="select select-bordered w-full" bind:value={form.type}>
+							<option value="plane">Flight</option>
+							<option value="train">Train</option>
+							<option value="car">Car</option>
+							<option value="bus">Bus</option>
+							<option value="ferry">Ferry</option>
+						</select>
+					</div>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Flight / Reference #</span></label>
+					<div class="flex gap-2">
+						<input type="text" class="input input-bordered flex-1" bind:value={form.flight_number} placeholder="e.g. UA 1234" />
+						{#if form.type === 'plane' && form.flight_number}
+							<button type="button" class="btn btn-outline btn-sm self-center" onclick={checkFlightStatus} disabled={checkingFlight}>
+								{#if checkingFlight}<span class="loading loading-spinner loading-xs"></span>{:else}Status{/if}
+							</button>
+						{/if}
+					</div>
+				</div>
+
+				{#if flightStatus && !flightStatus.error}
+					<div class="bg-base-300/50 rounded-lg p-3 text-sm space-y-1">
+						{#if flightStatus.status}<div class="font-medium text-base-content">{flightStatus.status}</div>{/if}
+						{#if flightStatus.departure}<div class="text-base-content/60">Departure: {flightStatus.departure}</div>{/if}
+						{#if flightStatus.arrival}<div class="text-base-content/60">Arrival: {flightStatus.arrival}</div>{/if}
+						{#if flightStatus.gate}<div class="text-base-content/60">Gate: {flightStatus.gate}</div>{/if}
+						{#if flightStatus.terminal}<div class="text-base-content/60">Terminal: {flightStatus.terminal}</div>{/if}
+					</div>
+				{:else if flightStatus?.error}
+					<div class="text-xs text-error">{flightStatus.error}</div>
+				{/if}
+
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">From</span></label>
+						<PlacesAutocomplete
+							bind:value={form.from_location}
+							placeholder="e.g. DFW"
+							onSelect={(details) => { form.from_place_id = details.place_id || ''; }}
+						/>
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">To</span></label>
+						<PlacesAutocomplete
+							bind:value={form.to_location}
+							placeholder="e.g. LAX"
+							onSelect={(details) => { form.to_place_id = details.place_id || ''; }}
+						/>
+					</div>
+				</div>
+
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">Departure</span></label>
+						<input type="datetime-local" class="input input-bordered w-full" bind:value={form.date} />
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">Arrival</span></label>
+						<input type="datetime-local" class="input input-bordered w-full" bind:value={form.end_date} />
+					</div>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Description</span></label>
+					<textarea class="textarea textarea-bordered w-full" rows="2" bind:value={form.description}></textarea>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Link</span></label>
+					<input type="url" class="input input-bordered w-full" bind:value={form.link} placeholder="https://..." />
+				</div>
+
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">Cost (Cash)</span></label>
+						<input type="number" class="input input-bordered w-full" bind:value={form.cost_cash} step="0.01" />
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">Cost (Points)</span></label>
+						<input type="number" class="input input-bordered w-full" bind:value={form.cost_points} />
+					</div>
+				</div>
+			</div>
+
+			<div class="modal-action flex justify-between">
+				<div>
+					{#if isEdit}
+						{#if confirmDelete}
+							<div class="flex gap-2">
+								<button type="button" class="btn btn-error btn-sm" onclick={doDelete} disabled={deleting}>
+									{#if deleting}<span class="loading loading-spinner loading-xs"></span>{/if}
+									Confirm Delete
+								</button>
+								<button type="button" class="btn btn-ghost btn-sm" onclick={() => confirmDelete = false}>Cancel</button>
+							</div>
+						{:else}
+							<button type="button" class="btn btn-ghost btn-sm text-error" onclick={() => confirmDelete = true}>Delete</button>
+						{/if}
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<button type="button" class="btn btn-ghost" onclick={close}>Cancel</button>
+					<button type="submit" class="btn btn-primary" disabled={saving}>
+						{#if saving}<span class="loading loading-spinner loading-sm"></span>{/if}
+						{isEdit ? 'Save' : 'Create'}
+					</button>
+				</div>
+			</div>
+		</form>
+	</div>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
+</dialog>
--- a/services/trips/frontend-legacy/src/lib/components/TripCard.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/TripCard.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { Trip } from '$lib/api/types';
+
+	let { trip }: { trip: Trip } = $props();
+
+	function formatDate(dateStr: string): string {
+		if (!dateStr) return '';
+		const d = new Date(dateStr + 'T00:00:00');
+		return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+	}
+
+	function getTripStatus(trip: Trip): { label: string; class: string } {
+		const now = new Date();
+		now.setHours(0, 0, 0, 0);
+		const start = trip.start_date ? new Date(trip.start_date + 'T00:00:00') : null;
+		const end = trip.end_date ? new Date(trip.end_date + 'T00:00:00') : null;
+
+		if (start && end && now >= start && now <= end) {
+			return { label: 'Active', class: 'badge-success' };
+		} else if (start && now < start) {
+			const days = Math.ceil((start.getTime() - now.getTime()) / 86400000);
+			return { label: `In ${days}d`, class: 'badge-info' };
+		} else {
+			return { label: 'Past', class: 'badge-ghost' };
+		}
+	}
+
+	function getDuration(trip: Trip): string {
+		if (!trip.start_date || !trip.end_date) return '';
+		const start = new Date(trip.start_date + 'T00:00:00');
+		const end = new Date(trip.end_date + 'T00:00:00');
+		const days = Math.ceil((end.getTime() - start.getTime()) / 86400000) + 1;
+		return `${days} day${days !== 1 ? 's' : ''}`;
+	}
+
+	let status = $derived(getTripStatus(trip));
+	let duration = $derived(getDuration(trip));
+	let imageUrl = $derived(trip.cover_image || (trip.image_path ? `/images/${trip.image_path}` : null));
+</script>
+
+<a href="/trip/{trip.id}" class="group block">
+	<div class="card bg-base-200 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden border border-base-300 hover:border-primary/30">
+		<!-- Image section -->
+		<figure class="relative h-48 overflow-hidden bg-base-300">
+			{#if imageUrl}
+				<img
+					src={imageUrl}
+					alt={trip.name}
+					class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+				/>
+			{:else}
+				<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/10 to-secondary/10">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-base-content/20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/>
+						<path d="M9 4v13"/>
+						<path d="M15 7v13"/>
+					</svg>
+				</div>
+			{/if}
+			<!-- Status badge overlay -->
+			<div class="absolute top-3 right-3">
+				<span class="badge {status.class} badge-sm font-medium">{status.label}</span>
+			</div>
+		</figure>
+
+		<!-- Content section -->
+		<div class="card-body p-4 gap-2">
+			<h2 class="card-title text-lg font-bold text-base-content group-hover:text-primary transition-colors">
+				{trip.name}
+			</h2>
+			{#if trip.start_date}
+				<div class="flex items-center gap-4 text-sm text-base-content/60">
+					<span class="flex items-center gap-1">
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+							<line x1="16" y1="2" x2="16" y2="6"/>
+							<line x1="8" y1="2" x2="8" y2="6"/>
+							<line x1="3" y1="10" x2="21" y2="10"/>
+						</svg>
+						{formatDate(trip.start_date)} — {formatDate(trip.end_date)}
+					</span>
+				</div>
+				{#if duration}
+					<div class="text-xs text-base-content/40">{duration}</div>
+				{/if}
+			{/if}
+			{#if trip.description}
+				<p class="text-sm text-base-content/50 line-clamp-2">{trip.description}</p>
+			{/if}
+		</div>
+	</div>
+</a>
--- a/services/trips/frontend-legacy/src/lib/components/TripEditModal.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/TripEditModal.svelte
@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { post } from '$lib/api/client';
+	import type { Trip } from '$lib/api/types';
+	import ImageUpload from './ImageUpload.svelte';
+
+	let {
+		trip,
+		onSave,
+		onClose
+	}: {
+		trip: Trip;
+		onSave: () => void;
+		onClose: () => void;
+	} = $props();
+
+	let modal = $state<HTMLDialogElement | null>(null);
+	let saving = $state(false);
+	let deleting = $state(false);
+	let confirmDelete = $state(false);
+	let sharing = $state(false);
+	let shareUrl = $state('');
+	let copied = $state(false);
+
+	let form = $state({
+		name: '', description: '', start_date: '', end_date: ''
+	});
+
+	let tripImages = $derived((trip as any)?.images || []);
+
+	$effect(() => {
+		if (trip.share_token) {
+			shareUrl = `${window.location.origin}/view/${trip.share_token}`;
+		} else {
+			shareUrl = '';
+		}
+		form = {
+			name: trip.name || '',
+			description: trip.description || '',
+			start_date: trip.start_date || '',
+			end_date: trip.end_date || ''
+		};
+		modal?.showModal();
+	});
+
+	async function save() {
+		saving = true;
+		try {
+			await post('/api/trip/update', { id: trip.id, ...form });
+			onSave();
+		} catch (e) {
+			console.error('Failed to update trip:', e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function doDelete() {
+		deleting = true;
+		try {
+			await post('/api/trip/delete', { id: trip.id });
+			goto('/');
+		} catch (e) {
+			console.error('Failed to delete trip:', e);
+		} finally {
+			deleting = false;
+		}
+	}
+
+	async function toggleShare() {
+		sharing = true;
+		try {
+			if (shareUrl) {
+				await post('/api/share/delete', { trip_id: trip.id });
+				shareUrl = '';
+			} else {
+				const result = await post<{ share_token: string }>('/api/share/create', { trip_id: trip.id });
+				shareUrl = `${window.location.origin}/view/${result.share_token}`;
+			}
+		} catch (e) { console.error('Share failed:', e); }
+		finally { sharing = false; }
+	}
+
+	async function copyShareUrl() {
+		await navigator.clipboard.writeText(shareUrl);
+		copied = true;
+		setTimeout(() => copied = false, 2000);
+	}
+
+	function close() { modal?.close(); onClose(); }
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
+	<div class="modal-box max-w-lg max-h-[85vh] overflow-y-auto">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4">
+			<div class="p-2 rounded-xl bg-primary/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+				</svg>
+			</div>
+			Edit Trip
+		</h3>
+
+		<!-- Cover Image -->
+		<div class="mb-4">
+			<label class="label"><span class="label-text text-sm">Cover Image</span></label>
+			<ImageUpload entityType="trip" entityId={trip.id} images={tripImages} entityName={form.name} onUpload={onSave} />
+		</div>
+
+		<form onsubmit={(e) => { e.preventDefault(); save(); }}>
+			<div class="space-y-3">
+				<div class="form-control">
+					<label class="label"><span class="label-text">Name</span></label>
+					<input type="text" class="input input-bordered w-full" bind:value={form.name} required />
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Description</span></label>
+					<textarea class="textarea textarea-bordered w-full" rows="2" bind:value={form.description}></textarea>
+				</div>
+
+				<div class="grid grid-cols-2 gap-3">
+					<div class="form-control">
+						<label class="label"><span class="label-text">Start Date</span></label>
+						<input type="date" class="input input-bordered w-full" bind:value={form.start_date} />
+					</div>
+					<div class="form-control">
+						<label class="label"><span class="label-text">End Date</span></label>
+						<input type="date" class="input input-bordered w-full" bind:value={form.end_date} />
+					</div>
+				</div>
+
+				<!-- Sharing -->
+				<div class="divider text-xs text-base-content/30">Sharing</div>
+				{#if shareUrl}
+					<div class="flex gap-2">
+						<input type="text" class="input input-bordered input-sm flex-1 text-xs" value={shareUrl} readonly />
+						<button type="button" class="btn btn-sm btn-ghost" onclick={copyShareUrl}>
+							{copied ? 'Copied!' : 'Copy'}
+						</button>
+						<button type="button" class="btn btn-sm btn-ghost text-error" onclick={toggleShare} disabled={sharing}>
+							Revoke
+						</button>
+					</div>
+				{:else}
+					<button type="button" class="btn btn-sm btn-outline gap-2" onclick={toggleShare} disabled={sharing}>
+						{#if sharing}<span class="loading loading-spinner loading-xs"></span>{/if}
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/>
+						</svg>
+						Create Share Link
+					</button>
+				{/if}
+			</div>
+
+			<div class="modal-action flex justify-between">
+				<div>
+					{#if confirmDelete}
+						<div class="flex gap-2">
+							<button type="button" class="btn btn-error btn-sm" onclick={doDelete} disabled={deleting}>
+								{#if deleting}<span class="loading loading-spinner loading-xs"></span>{/if}
+								Yes, Delete Trip
+							</button>
+							<button type="button" class="btn btn-ghost btn-sm" onclick={() => confirmDelete = false}>Cancel</button>
+						</div>
+					{:else}
+						<button type="button" class="btn btn-ghost btn-sm text-error" onclick={() => confirmDelete = true}>Delete Trip</button>
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<button type="button" class="btn btn-ghost" onclick={close}>Cancel</button>
+					<button type="submit" class="btn btn-primary" disabled={saving || !form.name.trim()}>
+						{#if saving}<span class="loading loading-spinner loading-sm"></span>{/if}
+						Save
+					</button>
+				</div>
+			</div>
+		</form>
+	</div>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
+</dialog>
--- a/services/trips/frontend-legacy/src/lib/components/TripMap.svelte
+++ b/services/trips/frontend-legacy/src/lib/components/TripMap.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { TripDetail } from '$lib/api/types';
+
+	let {
+		trip,
+		onClose
+	}: {
+		trip: TripDetail;
+		onClose: () => void;
+	} = $props();
+
+	let modal = $state<HTMLDialogElement | null>(null);
+
+	interface Marker {
+		lat: number;
+		lng: number;
+		label: string;
+		type: string;
+	}
+
+	let markers = $derived.by(() => {
+		const m: Marker[] = [];
+		for (const loc of trip.locations || []) {
+			if (loc.latitude && loc.longitude) {
+				m.push({ lat: loc.latitude, lng: loc.longitude, label: loc.name, type: 'activity' });
+			}
+		}
+		for (const l of trip.lodging || []) {
+			if ((l as any).latitude && (l as any).longitude) {
+				m.push({ lat: (l as any).latitude, lng: (l as any).longitude, label: l.name, type: 'hotel' });
+			}
+		}
+		for (const t of trip.transportations || []) {
+			if (t.from_lat && t.from_lng) {
+				m.push({ lat: t.from_lat, lng: t.from_lng, label: t.from_location, type: 'transport' });
+			}
+			if (t.to_lat && t.to_lng) {
+				m.push({ lat: t.to_lat, lng: t.to_lng, label: t.to_location, type: 'transport' });
+			}
+		}
+		return m;
+	});
+
+	// Open in Google Maps with all locations
+	function openInGoogleMaps() {
+		if (markers.length === 0) return;
+		if (markers.length === 1) {
+			window.open(`https://www.google.com/maps/search/?api=1&query=${markers[0].lat},${markers[0].lng}`, '_blank');
+		} else {
+			const origin = `${markers[0].lat},${markers[0].lng}`;
+			const dest = `${markers[markers.length - 1].lat},${markers[markers.length - 1].lng}`;
+			const waypoints = markers.slice(1, -1).map(m => `${m.lat},${m.lng}`).join('|');
+			window.open(`https://www.google.com/maps/dir/?api=1&origin=${origin}&destination=${dest}${waypoints ? '&waypoints=' + waypoints : ''}`, '_blank');
+		}
+	}
+
+	function typeBadge(type: string): string {
+		switch (type) {
+			case 'activity': return 'badge-accent';
+			case 'hotel': return 'badge-secondary';
+			case 'transport': return 'badge-info';
+			default: return 'badge-ghost';
+		}
+	}
+
+	$effect(() => { modal?.showModal(); });
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle" onclose={onClose}>
+	<div class="modal-box max-w-2xl max-h-[85vh] overflow-y-auto">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4">
+			<div class="p-2 rounded-xl bg-primary/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+				</svg>
+			</div>
+			Map
+			<span class="badge badge-primary badge-sm">{markers.length} pins</span>
+		</h3>
+
+		{#if markers.length === 0}
+			<div class="text-center py-12 text-base-content/40">No locations with coordinates</div>
+		{:else}
+			<!-- Open in Google Maps -->
+			<button type="button" class="btn btn-primary btn-sm gap-2 mb-4 w-full" onclick={openInGoogleMaps}>
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
+				</svg>
+				Open in Google Maps
+			</button>
+
+			<!-- Location list -->
+			<div class="space-y-1">
+				{#each markers as marker, i}
+					<a
+						href="https://www.google.com/maps/search/?api=1&query={marker.lat},{marker.lng}"
+						target="_blank"
+						class="flex items-center gap-3 p-2 rounded-lg hover:bg-base-200 transition-colors"
+					>
+						<span class="w-6 h-6 rounded-full bg-base-300 flex items-center justify-center text-xs font-bold text-base-content/50 shrink-0">{i + 1}</span>
+						<div class="flex-1 min-w-0">
+							<div class="text-sm font-medium truncate">{marker.label}</div>
+							<div class="text-xs text-base-content/30">{marker.lat.toFixed(4)}, {marker.lng.toFixed(4)}</div>
+						</div>
+						<span class="badge badge-sm {typeBadge(marker.type)}">{marker.type}</span>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	</div>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
+</dialog>
--- a/services/trips/frontend-legacy/src/lib/index.ts
+++ b/services/trips/frontend-legacy/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/services/trips/frontend-legacy/src/routes/+layout.svelte
+++ b/services/trips/frontend-legacy/src/routes/+layout.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import '../app.css';
+	import Navbar from '$lib/components/Navbar.svelte';
+
+	let { children } = $props();
+</script>
+
+<svelte:head>
+	<title>Trips</title>
+</svelte:head>
+
+<div class="min-h-screen bg-base-100 flex flex-col">
+	<Navbar />
+	<main class="flex-1">
+		{@render children()}
+	</main>
+</div>
--- a/services/trips/frontend-legacy/src/routes/+page.svelte
+++ b/services/trips/frontend-legacy/src/routes/+page.svelte
@@ -0,0 +1,627 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { get, post } from '$lib/api/client';
+	import type { Trip } from '$lib/api/types';
+	import TripCard from '$lib/components/TripCard.svelte';
+	import StatsBar from '$lib/components/StatsBar.svelte';
+
+	interface TripsResponse {
+		trips: Trip[];
+	}
+
+	interface SearchResult {
+		type: string;
+		id: string;
+		trip_id: string;
+		name: string;
+		detail: string;
+		trip_name: string;
+	}
+
+	let trips = $state<Trip[]>([]);
+	let loading = $state(true);
+	let error = $state('');
+	let searchQuery = $state('');
+	let searchResults = $state<SearchResult[]>([]);
+	let showSearchResults = $state(false);
+	let searchDebounce: ReturnType<typeof setTimeout>;
+
+	// New trip modal
+	let newTripModal = $state<HTMLDialogElement | null>(null);
+	let newTrip = $state({ name: '', description: '', start_date: '', end_date: '' });
+	let creating = $state(false);
+
+	function typeIcon(type: string): string {
+		switch (type) {
+			case 'trip': return 'M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z';
+			case 'location': return 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z';
+			case 'lodging': return 'M3 14h18v7H3zM3 7v7M21 7v7M3 7l9-4 9 4';
+			case 'transportation': return 'M22 16.21v-1.895L14 8.42V4a2 2 0 1 0-4 0v4.42L2 14.315v1.895l8-2.526V18l-2 1.5V21l4-1 4 1v-1.5L16 18v-4.316z';
+			case 'note': return 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z';
+			default: return 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z';
+		}
+	}
+
+	function typeLabel(type: string): string {
+		switch (type) {
+			case 'trip': return 'Trip';
+			case 'location': return 'Activity';
+			case 'lodging': return 'Hotel';
+			case 'transportation': return 'Flight';
+			case 'note': return 'Note';
+			default: return type;
+		}
+	}
+
+	function typeBadgeClass(type: string): string {
+		switch (type) {
+			case 'trip': return 'badge-primary';
+			case 'location': return 'badge-accent';
+			case 'lodging': return 'badge-secondary';
+			case 'transportation': return 'badge-info';
+			case 'note': return 'badge-warning';
+			default: return 'badge-ghost';
+		}
+	}
+
+	async function doSearch(query: string) {
+		if (query.length < 2) {
+			searchResults = [];
+			showSearchResults = false;
+			return;
+		}
+		try {
+			const data = await get<{ results: SearchResult[] }>(`/api/search?q=${encodeURIComponent(query)}`);
+			searchResults = data.results;
+			showSearchResults = true;
+		} catch {
+			searchResults = [];
+		}
+	}
+
+	function onSearchInput() {
+		clearTimeout(searchDebounce);
+		searchDebounce = setTimeout(() => doSearch(searchQuery), 250);
+	}
+
+	function selectResult(result: SearchResult) {
+		showSearchResults = false;
+		searchQuery = '';
+		goto(`/trip/${result.trip_id}`);
+	}
+
+	// Separate trips into categories
+	let activeTrips = $derived(trips.filter(t => {
+		const now = new Date(); now.setHours(0,0,0,0);
+		const start = t.start_date ? new Date(t.start_date + 'T00:00:00') : null;
+		const end = t.end_date ? new Date(t.end_date + 'T00:00:00') : null;
+		return start && end && now >= start && now <= end;
+	}));
+
+	let upcomingTrips = $derived(trips.filter(t => {
+		const now = new Date(); now.setHours(0,0,0,0);
+		const start = t.start_date ? new Date(t.start_date + 'T00:00:00') : null;
+		return start && now < start;
+	}).sort((a, b) => a.start_date.localeCompare(b.start_date)));
+
+	let pastTrips = $derived(trips.filter(t => {
+		const now = new Date(); now.setHours(0,0,0,0);
+		const end = t.end_date ? new Date(t.end_date + 'T00:00:00') : null;
+		return end && now > end;
+	}).sort((a, b) => b.start_date.localeCompare(a.start_date)));
+
+	// Next upcoming trip countdown
+	let nextTrip = $derived(upcomingTrips.length > 0 ? upcomingTrips[0] : null);
+	let daysUntilNext = $derived(() => {
+		if (!nextTrip?.start_date) return 0;
+		const now = new Date(); now.setHours(0,0,0,0);
+		const start = new Date(nextTrip.start_date + 'T00:00:00');
+		return Math.ceil((start.getTime() - now.getTime()) / 86400000);
+	});
+
+	function formatDateShort(d: string): string {
+		if (!d) return '';
+		return new Date(d + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+	}
+
+	$effect(() => {
+		loadTrips();
+	});
+
+	async function loadTrips() {
+		try {
+			const data = await get<TripsResponse>('/api/trips');
+			trips = data.trips;
+		} catch (e) {
+			error = 'Failed to load trips';
+			console.error(e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	let quickInput = $state('');
+	let quickParsed = $state(false);
+	let descLookupTimer: ReturnType<typeof setTimeout>;
+	let lastLookedUpName = '';
+
+	async function lookupDescription(name: string) {
+		if (!name || name.length < 2 || name === lastLookedUpName) return;
+		lastLookedUpName = name;
+		try {
+			const data = await post<{ predictions: Array<{ name: string; address: string }> }>(
+				'/api/places/autocomplete', { query: name }
+			);
+			if (data.predictions?.length > 0) {
+				const place = data.predictions[0];
+				const addr = place.address || '';
+				if (addr && !newTrip.description) {
+					newTrip.description = `Trip to ${place.name}${addr ? ', ' + addr : ''}`;
+				}
+			}
+		} catch { /* ignore */ }
+	}
+
+	function parseQuickInput(input: string) {
+		if (!input.trim()) {
+			quickParsed = false;
+			return;
+		}
+
+		const text = input.trim();
+		const currentYear = new Date().getFullYear();
+
+		// Month name mapping
+		const months: Record<string, string> = {
+			jan: '01', january: '01', feb: '02', february: '02', mar: '03', march: '03',
+			apr: '04', april: '04', may: '05', jun: '06', june: '06',
+			jul: '07', july: '07', aug: '08', august: '08', sep: '09', september: '09',
+			oct: '10', october: '10', nov: '11', november: '11', dec: '12', december: '12'
+		};
+
+		function parseDate(str: string, refYear?: number): string | null {
+			str = str.trim().replace(/,/g, '');
+
+			// ISO format: 2026-10-01
+			const isoMatch = str.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+			if (isoMatch) return `${isoMatch[1]}-${isoMatch[2].padStart(2, '0')}-${isoMatch[3].padStart(2, '0')}`;
+
+			// MM/DD/YYYY or MM/DD/YY or MM/DD
+			const slashMatch = str.match(/^(\d{1,2})\/(\d{1,2})(?:\/(\d{2,4}))?$/);
+			if (slashMatch) {
+				const y = slashMatch[3] ? (slashMatch[3].length === 2 ? '20' + slashMatch[3] : slashMatch[3]) : String(refYear || currentYear);
+				return `${y}-${slashMatch[1].padStart(2, '0')}-${slashMatch[2].padStart(2, '0')}`;
+			}
+
+			// "Oct 1" or "October 1" or "Oct 1 2026"
+			const monthNameMatch = str.match(/^([a-z]+)\s+(\d{1,2})(?:\s+(\d{4}))?$/i);
+			if (monthNameMatch) {
+				const m = months[monthNameMatch[1].toLowerCase()];
+				if (m) {
+					const y = monthNameMatch[3] || String(refYear || currentYear);
+					return `${y}-${m}-${monthNameMatch[2].padStart(2, '0')}`;
+				}
+			}
+
+			// "1 Oct" or "1 October 2026"
+			const dayFirstMatch = str.match(/^(\d{1,2})\s+([a-z]+)(?:\s+(\d{4}))?$/i);
+			if (dayFirstMatch) {
+				const m = months[dayFirstMatch[2].toLowerCase()];
+				if (m) {
+					const y = dayFirstMatch[3] || String(refYear || currentYear);
+					return `${y}-${m}-${dayFirstMatch[1].padStart(2, '0')}`;
+				}
+			}
+
+			return null;
+		}
+
+		// Try splitting by common separators: "to", "-", "–", "through"
+		const separators = [/\s+to\s+/i, /\s*[-–—]\s*(?=\d|[a-z])/i, /\s+through\s+/i];
+		let name = '';
+		let startStr = '';
+		let endStr = '';
+		let description = '';
+		let matched = false;
+
+		// Date patterns to look for
+		const datePatterns = [
+			/(\d{1,2}\/\d{1,2}(?:\/\d{2,4})?)/,
+			/(\d{4}-\d{1,2}-\d{1,2})/,
+			/([A-Za-z]+\s+\d{1,2}(?:\s+\d{4})?)/,
+			/(\d{1,2}\s+[A-Za-z]+(?:\s+\d{4})?)/,
+		];
+
+		for (const sep of separators) {
+			const parts = text.split(sep);
+			if (parts.length >= 2) {
+				const beforeSep = parts.slice(0, -1).join(' ').trim();
+				const afterSep = parts[parts.length - 1].trim();
+
+				// Find start date in beforeSep (from right)
+				for (const dp of datePatterns) {
+					// Anchor to end for start date search
+					const anchored = new RegExp(dp.source + '\\s*$');
+					const dm = beforeSep.match(anchored);
+					if (dm && dm.index !== undefined) {
+						name = beforeSep.slice(0, dm.index).trim();
+						startStr = dm[1];
+
+						// afterSep may be "1/10/27 Umrah and Maldives trip" or just "1/10/27"
+						// Try to extract end date from the beginning of afterSep
+						for (const edp of datePatterns) {
+							const anchStart = new RegExp('^' + edp.source);
+							const em = afterSep.match(anchStart);
+							if (em) {
+								endStr = em[1];
+								// Everything after the end date is the description
+								const remainder = afterSep.slice(em[0].length).trim();
+								if (remainder) {
+									description = remainder;
+								}
+								matched = true;
+								break;
+							}
+						}
+						if (!matched) {
+							// No date pattern found — treat entire afterSep as end date
+							endStr = afterSep;
+							matched = true;
+						}
+						break;
+					}
+				}
+				if (matched) break;
+			}
+		}
+
+		if (!matched) {
+			// No date range found — just use as name
+			newTrip.name = text;
+			quickParsed = false;
+			return;
+		}
+
+		// Parse the dates
+		const startDate = parseDate(startStr);
+		const startYear = startDate ? parseInt(startDate.split('-')[0]) : currentYear;
+		const endDate = parseDate(endStr, startYear);
+
+		if (name) newTrip.name = name;
+		if (description) newTrip.description = description;
+		if (startDate) newTrip.start_date = startDate;
+		if (endDate) newTrip.end_date = endDate;
+
+		// If end date is before start date, assume next year
+		if (startDate && endDate && endDate < startDate) {
+			const y = parseInt(endDate.split('-')[0]) + 1;
+			newTrip.end_date = `${y}${endDate.slice(4)}`;
+		}
+
+		quickParsed = !!(startDate || endDate);
+	}
+
+	function openNewTrip() {
+		newTrip = { name: '', description: '', start_date: '', end_date: '' };
+		quickInput = '';
+		quickParsed = false;
+		newTripModal?.showModal();
+	}
+
+	async function createTrip() {
+		if (!newTrip.name.trim()) return;
+		creating = true;
+		try {
+			const result = await post<{ success: boolean; id: string }>('/api/trip', newTrip);
+			if (result.success) {
+				newTripModal?.close();
+				goto(`/trip/${result.id}`);
+			}
+		} catch (e) {
+			console.error('Failed to create trip:', e);
+		} finally {
+			creating = false;
+		}
+	}
+</script>
+
+<div class="container mx-auto px-4 py-8 max-w-7xl">
+	<!-- Header -->
+	<div class="flex items-center justify-between mb-8">
+		<div>
+			<h1 class="text-3xl font-bold text-base-content">My Trips</h1>
+			<p class="text-base-content/50 mt-1">Plan and track your adventures</p>
+		</div>
+		<button class="btn btn-primary gap-2" onclick={openNewTrip}>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<line x1="12" y1="5" x2="12" y2="19"/>
+				<line x1="5" y1="12" x2="19" y2="12"/>
+			</svg>
+			New Trip
+		</button>
+	</div>
+
+	<!-- Stats bar -->
+	<!-- Next trip countdown -->
+	{#if nextTrip}
+		<a href="/trip/{nextTrip.id}" class="flex items-center gap-4 p-4 mb-6 rounded-xl bg-gradient-to-r from-info/10 to-primary/10 border border-info/20 hover:border-info/40 transition-colors group">
+			<div class="p-2.5 rounded-xl bg-info/15 shrink-0">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M22 16.21v-1.895L14 8.42V4a2 2 0 1 0-4 0v4.42L2 14.315v1.895l8-2.526V18l-2 1.5V21l4-1 4 1v-1.5L16 18v-4.316z"/>
+				</svg>
+			</div>
+			<div class="flex-1 min-w-0">
+				<div class="text-xs text-info/70 uppercase tracking-wide font-medium mb-0.5">Next Adventure</div>
+				<div class="font-semibold text-base-content group-hover:text-info transition-colors truncate">{nextTrip.name}</div>
+				<div class="text-sm text-base-content/50">{formatDateShort(nextTrip.start_date)} — {formatDateShort(nextTrip.end_date)}</div>
+			</div>
+			<div class="text-center shrink-0">
+				<div class="text-2xl font-bold text-info leading-none">{daysUntilNext()}</div>
+				<div class="text-xs text-base-content/40 mt-0.5">days</div>
+			</div>
+		</a>
+	{:else if activeTrips.length > 0}
+		<a href="/trip/{activeTrips[0].id}" class="flex items-center gap-3 p-4 mb-6 rounded-xl bg-gradient-to-r from-success/10 to-success/5 border border-success/20 hover:border-success/40 transition-colors group">
+			<div class="p-2 rounded-xl bg-success/15">
+				<span class="relative flex h-3 w-3">
+					<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span>
+					<span class="relative inline-flex rounded-full h-3 w-3 bg-success"></span>
+				</span>
+			</div>
+			<div class="flex-1">
+				<span class="font-semibold text-base-content group-hover:text-success transition-colors">{activeTrips[0].name}</span>
+				<span class="text-base-content/40 mx-2">·</span>
+				<span class="text-sm text-success">Happening now!</span>
+			</div>
+		</a>
+	{/if}
+
+	<StatsBar />
+
+	<!-- Search -->
+	{#if trips.length > 0}
+		<div class="mb-6">
+			<div class="relative max-w-md">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+				</svg>
+				<input
+					type="text"
+					placeholder="Search trips, hotels, flights, places..."
+					class="input input-bordered w-full pl-10"
+					bind:value={searchQuery}
+					oninput={onSearchInput}
+					onfocus={() => { if (searchResults.length > 0) showSearchResults = true; }}
+					onblur={() => setTimeout(() => showSearchResults = false, 200)}
+				/>
+				{#if searchQuery}
+					<button
+						class="btn btn-ghost btn-sm btn-circle absolute right-2 top-1/2 -translate-y-1/2"
+						onclick={() => { searchQuery = ''; searchResults = []; showSearchResults = false; }}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+						</svg>
+					</button>
+				{/if}
+
+				<!-- Search results dropdown -->
+				{#if showSearchResults && searchResults.length > 0}
+					<div class="absolute top-full left-0 right-0 mt-1 bg-base-200 border border-base-300 rounded-box shadow-xl z-50 max-h-80 overflow-y-auto">
+						{#each searchResults as result}
+							<button
+								class="w-full flex items-center gap-3 p-3 hover:bg-base-300 transition-colors text-left"
+								onmousedown={() => selectResult(result)}
+							>
+								<div class="w-8 h-8 rounded-lg bg-base-300 flex items-center justify-center shrink-0">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<path d={typeIcon(result.type)}/>
+									</svg>
+								</div>
+								<div class="flex-1 min-w-0">
+									<div class="font-medium text-sm text-base-content truncate">{result.name}</div>
+									{#if result.detail}
+										<div class="text-xs text-base-content/40 truncate">{result.detail}</div>
+									{/if}
+								</div>
+								<div class="flex items-center gap-2 shrink-0">
+									<span class="badge badge-sm {typeBadgeClass(result.type)}">{typeLabel(result.type)}</span>
+									{#if result.type !== 'trip'}
+										<span class="text-xs text-base-content/30 max-w-24 truncate">{result.trip_name}</span>
+									{/if}
+								</div>
+							</button>
+						{/each}
+					</div>
+				{:else if showSearchResults && searchQuery.length >= 2 && searchResults.length === 0}
+					<div class="absolute top-full left-0 right-0 mt-1 bg-base-200 border border-base-300 rounded-box shadow-xl z-50 p-4 text-center text-base-content/40 text-sm">
+						No results for "{searchQuery}"
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	{#if loading}
+		<div class="flex justify-center py-20">
+			<span class="loading loading-spinner loading-lg text-primary"></span>
+		</div>
+	{:else if error}
+		<div class="alert alert-error">
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+			</svg>
+			<span>{error}</span>
+		</div>
+	{:else}
+		<!-- Active trips -->
+		{#if activeTrips.length > 0}
+			<section class="mb-10">
+				<div class="flex items-center gap-2 mb-4">
+					<span class="badge badge-success badge-sm"></span>
+					<h2 class="text-xl font-semibold text-base-content">Active Now</h2>
+				</div>
+				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+					{#each activeTrips as trip (trip.id)}
+						<TripCard {trip} />
+					{/each}
+				</div>
+			</section>
+		{/if}
+
+		<!-- Upcoming trips -->
+		{#if upcomingTrips.length > 0}
+			<section class="mb-10">
+				<div class="flex items-center gap-2 mb-4">
+					<span class="badge badge-info badge-sm"></span>
+					<h2 class="text-xl font-semibold text-base-content">Upcoming</h2>
+				</div>
+				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+					{#each upcomingTrips as trip (trip.id)}
+						<TripCard {trip} />
+					{/each}
+				</div>
+			</section>
+		{/if}
+
+		<!-- Past trips -->
+		{#if pastTrips.length > 0}
+			<section class="mb-10">
+				<div class="flex items-center gap-2 mb-4">
+					<span class="badge badge-ghost badge-sm"></span>
+					<h2 class="text-xl font-semibold text-base-content">Past Adventures</h2>
+				</div>
+				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+					{#each pastTrips as trip (trip.id)}
+						<TripCard {trip} />
+					{/each}
+				</div>
+			</section>
+		{/if}
+
+		<!-- Empty state -->
+		{#if trips.length === 0}
+			<div class="text-center py-20">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 mx-auto text-base-content/20 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/>
+					<path d="M9 4v13"/>
+					<path d="M15 7v13"/>
+				</svg>
+				<h3 class="text-xl font-semibold text-base-content/60 mb-2">No trips yet</h3>
+				<p class="text-base-content/40 mb-6">Start planning your first adventure</p>
+				<button class="btn btn-primary" onclick={openNewTrip}>Create Your First Trip</button>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<!-- New Trip Modal -->
+<dialog bind:this={newTripModal} class="modal modal-bottom sm:modal-middle">
+	<div class="modal-box max-w-lg">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">&#x2715;</button>
+		</form>
+		<h3 class="font-bold text-lg flex items-center gap-2 mb-4">
+			<div class="p-2 rounded-xl bg-primary/15">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+				</svg>
+			</div>
+			New Trip
+		</h3>
+		<form onsubmit={(e) => { e.preventDefault(); createTrip(); }}>
+			<div class="space-y-4">
+				<!-- Quick input -->
+				<div class="form-control">
+					<label class="label" for="quick-input">
+						<span class="label-text">Quick Add</span>
+						<span class="label-text-alt text-base-content/30">auto-fills below</span>
+					</label>
+					<input
+						id="quick-input"
+						type="text"
+						placeholder="e.g. Toronto Oct 1 to Oct 10 Family vacation"
+						class="input input-bordered input-primary w-full"
+						bind:value={quickInput}
+						oninput={() => parseQuickInput(quickInput)}
+					/>
+					{#if quickParsed}
+						<label class="label pb-0">
+							<span class="label-text-alt text-success flex items-center gap-1">
+								<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+									<polyline points="20 6 9 17 4 12"/>
+								</svg>
+								Parsed — check fields below
+							</span>
+						</label>
+					{/if}
+				</div>
+
+				<div class="divider text-base-content/20 text-xs my-1">or fill in manually</div>
+
+				<div class="form-control">
+					<label class="label" for="trip-name">
+						<span class="label-text">Trip Name</span>
+					</label>
+					<input
+						id="trip-name"
+						type="text"
+						placeholder="e.g. Japan 2026"
+						class="input input-bordered w-full"
+						bind:value={newTrip.name}
+						required
+					/>
+				</div>
+				<div class="form-control">
+					<label class="label" for="trip-desc">
+						<span class="label-text">Description</span>
+						<span class="label-text-alt text-base-content/30">Optional</span>
+					</label>
+					<textarea
+						id="trip-desc"
+						placeholder="What's this trip about?"
+						class="textarea textarea-bordered w-full"
+						rows="2"
+						bind:value={newTrip.description}
+					></textarea>
+				</div>
+				<div class="grid grid-cols-2 gap-4">
+					<div class="form-control">
+						<label class="label" for="trip-start">
+							<span class="label-text">Start Date</span>
+						</label>
+						<input
+							id="trip-start"
+							type="date"
+							class="input input-bordered w-full"
+							bind:value={newTrip.start_date}
+						/>
+					</div>
+					<div class="form-control">
+						<label class="label" for="trip-end">
+							<span class="label-text">End Date</span>
+						</label>
+						<input
+							id="trip-end"
+							type="date"
+							class="input input-bordered w-full"
+							bind:value={newTrip.end_date}
+						/>
+					</div>
+				</div>
+			</div>
+			<div class="modal-action">
+				<button type="button" class="btn btn-ghost" onclick={() => newTripModal?.close()}>Cancel</button>
+				<button type="submit" class="btn btn-primary" disabled={creating || !newTrip.name.trim()}>
+					{#if creating}
+						<span class="loading loading-spinner loading-sm"></span>
+					{/if}
+					Create Trip
+				</button>
+			</div>
+		</form>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
+</dialog>
--- a/services/trips/frontend-legacy/src/routes/login/+page.svelte
+++ b/services/trips/frontend-legacy/src/routes/login/+page.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	let token = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	async function handleLogin() {
+		if (!token.trim()) {
+			error = 'Please enter your API token';
+			return;
+		}
+
+		loading = true;
+		error = '';
+
+		try {
+			// Test the token
+			const res = await fetch('/api/trips', {
+				headers: { 'Authorization': `Bearer ${token.trim()}` }
+			});
+
+			if (res.ok) {
+				localStorage.setItem('api_token', token.trim());
+				goto('/');
+			} else {
+				error = 'Invalid API token';
+			}
+		} catch {
+			error = 'Connection failed';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<div class="min-h-[calc(100vh-4rem)] flex items-center justify-center px-4">
+	<div class="card bg-base-200 shadow-xl w-full max-w-md border border-base-300">
+		<div class="card-body">
+			<div class="text-center mb-4">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-primary mb-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/>
+					<path d="M9 4v13"/>
+					<path d="M15 7v13"/>
+				</svg>
+				<h2 class="text-2xl font-bold text-base-content">Trips</h2>
+				<p class="text-base-content/50 text-sm mt-1">Enter your API token to continue</p>
+			</div>
+
+			{#if error}
+				<div class="alert alert-error text-sm py-2">
+					<span>{error}</span>
+				</div>
+			{/if}
+
+			<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>
+				<div class="form-control">
+					<label class="label" for="token">
+						<span class="label-text">API Token</span>
+					</label>
+					<input
+						id="token"
+						type="password"
+						placeholder="Bearer token"
+						class="input input-bordered w-full"
+						bind:value={token}
+					/>
+				</div>
+				<button
+					type="submit"
+					class="btn btn-primary w-full mt-4"
+					disabled={loading}
+				>
+					{#if loading}
+						<span class="loading loading-spinner loading-sm"></span>
+					{/if}
+					Connect
+				</button>
+			</form>
+		</div>
+	</div>
+</div>
--- a/services/trips/frontend-legacy/src/routes/settings/+page.svelte
+++ b/services/trips/frontend-legacy/src/routes/settings/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	function logout() {
+		localStorage.removeItem('api_token');
+		goto('/login');
+	}
+</script>
+
+<div class="container mx-auto px-4 py-8 max-w-2xl">
+	<h1 class="text-3xl font-bold text-base-content mb-8">Settings</h1>
+
+	<div class="card bg-base-200 border border-base-300">
+		<div class="card-body">
+			<h2 class="card-title text-base-content">Session</h2>
+			<p class="text-base-content/50 text-sm">Clear your API token and return to login.</p>
+			<div class="card-actions justify-end mt-4">
+				<button class="btn btn-error btn-outline" onclick={logout}>
+					Disconnect
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
--- a/services/trips/frontend-legacy/src/routes/trip/[id]/+page.svelte
+++ b/services/trips/frontend-legacy/src/routes/trip/[id]/+page.svelte
@@ -0,0 +1,751 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { get } from '$lib/api/client';
+	import type { TripDetail, Location, Lodging, Transportation, Note } from '$lib/api/types';
+	import LocationModal from '$lib/components/LocationModal.svelte';
+	import LodgingModal from '$lib/components/LodgingModal.svelte';
+	import TransportModal from '$lib/components/TransportModal.svelte';
+	import NoteModal from '$lib/components/NoteModal.svelte';
+	import TripEditModal from '$lib/components/TripEditModal.svelte';
+	import ParseModal from '$lib/components/ParseModal.svelte';
+	import TripMap from '$lib/components/TripMap.svelte';
+	import AIGuideModal from '$lib/components/AIGuideModal.svelte';
+	import MapsButton from '$lib/components/MapsButton.svelte';
+
+	interface DayGroup {
+		date: string;
+		dayLabel: string;
+		dayNumber: number;
+		items: DayItem[];
+	}
+
+	interface DayItem {
+		type: 'transportation' | 'lodging' | 'location' | 'note';
+		sortTime: string;
+		data: any;
+	}
+
+	let trip = $state<TripDetail | null>(null);
+	let loading = $state(true);
+	let error = $state('');
+	let currentSlide = $state(0);
+	let fabOpen = $state(false);
+	let autoplayTimer: ReturnType<typeof setInterval>;
+	let expandedDays = $state<Set<string>>(new Set());
+
+	// Modal state
+	let showLocationModal = $state(false);
+	let showLodgingModal = $state(false);
+	let showTransportModal = $state(false);
+	let showNoteModal = $state(false);
+	let showTripEditModal = $state(false);
+	let showParseModal = $state(false);
+	let showMapModal = $state(false);
+	let showAIGuide = $state(false);
+	let editLocation = $state<Location | null>(null);
+	let editLodging = $state<Lodging | null>(null);
+	let editTransport = $state<Transportation | null>(null);
+	let editNote = $state<Note | null>(null);
+
+	// Weather
+	let weather = $state<Record<string, any>>({});
+
+	async function loadWeather() {
+		if (!trip?.start_date) return;
+		const now = new Date();
+		const start = new Date(trip.start_date + 'T00:00:00');
+		const end = new Date(trip.end_date + 'T00:00:00');
+
+		// Only fetch weather for dates within 16 days from now
+		const maxDate = new Date(now); maxDate.setDate(maxDate.getDate() + 16);
+		const dates: string[] = [];
+		for (let d = new Date(Math.max(start.getTime(), now.getTime())); d <= end && d <= maxDate; d.setDate(d.getDate() + 1)) {
+			dates.push(d.toISOString().split('T')[0]);
+		}
+		if (dates.length === 0) return;
+
+		try {
+			const data = await post<{ forecasts: Record<string, any> }>('/api/weather', {
+				trip_id: trip.id,
+				dates
+			});
+			weather = data.forecasts || {};
+		} catch { /* ignore */ }
+	}
+
+	$effect(() => { if (trip) loadWeather(); });
+
+	function openLocationEdit(loc: Location) { editLocation = loc; showLocationModal = true; }
+	function openLodgingEdit(l: Lodging) { editLodging = l; showLodgingModal = true; }
+	function openTransportEdit(t: Transportation) { editTransport = t; showTransportModal = true; }
+	function openNoteEdit(n: Note) { editNote = n; showNoteModal = true; }
+
+	function openNewLocation() { editLocation = null; showLocationModal = true; fabOpen = false; }
+	function openNewLodging() { editLodging = null; showLodgingModal = true; fabOpen = false; }
+	function openNewTransport() { editTransport = null; showTransportModal = true; fabOpen = false; }
+	function openNewNote() { editNote = null; showNoteModal = true; fabOpen = false; }
+
+	function handleModalSave() {
+		showLocationModal = false; showLodgingModal = false;
+		showTransportModal = false; showNoteModal = false;
+		if (tripId) loadTrip(tripId);
+	}
+
+	function handleModalDelete() {
+		showLocationModal = false; showLodgingModal = false;
+		showTransportModal = false; showNoteModal = false;
+		if (tripId) loadTrip(tripId);
+	}
+
+	function handleModalClose() {
+		showLocationModal = false; showLodgingModal = false;
+		showTransportModal = false; showNoteModal = false;
+	}
+
+	let tripId = $derived(page.params.id);
+
+	$effect(() => {
+		if (tripId) loadTrip(tripId);
+	});
+
+	async function loadTrip(id: string) {
+		loading = true;
+		try {
+			trip = await get<TripDetail>(`/api/trip/${id}`);
+		} catch (e) {
+			error = 'Failed to load trip';
+			console.error(e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Build itinerary grouped by day
+	let days = $derived.by(() => {
+		if (!trip?.start_date || !trip?.end_date) return [];
+
+		const start = new Date(trip.start_date + 'T00:00:00');
+		const end = new Date(trip.end_date + 'T00:00:00');
+		const dayMap = new Map<string, DayGroup>();
+
+		// Create all days
+		let dayNum = 1;
+		for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+			const dateStr = d.toISOString().split('T')[0];
+			dayMap.set(dateStr, {
+				date: dateStr,
+				dayLabel: d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' }),
+				dayNumber: dayNum++,
+				items: []
+			});
+		}
+
+		// Place transportations
+		for (const t of trip.transportations || []) {
+			const dateStr = extractDate(t.date);
+			if (dateStr && dayMap.has(dateStr)) {
+				dayMap.get(dateStr)!.items.push({
+					type: 'transportation', sortTime: extractTime(t.date) || '00:00', data: t
+				});
+			}
+		}
+
+		// Place locations
+		for (const loc of trip.locations || []) {
+			const dateStr = loc.visit_date || extractDate(loc.start_time);
+			if (dateStr && dayMap.has(dateStr)) {
+				dayMap.get(dateStr)!.items.push({
+					type: 'location', sortTime: extractTime(loc.start_time) || '12:00', data: loc
+				});
+			}
+		}
+
+		// Place notes
+		for (const n of trip.notes || []) {
+			if (n.date && dayMap.has(n.date)) {
+				dayMap.get(n.date)!.items.push({
+					type: 'note', sortTime: '23:00', data: n
+				});
+			}
+		}
+
+		// Sort items within each day by time
+		for (const day of dayMap.values()) {
+			day.items.sort((a, b) => a.sortTime.localeCompare(b.sortTime));
+		}
+
+		return Array.from(dayMap.values());
+	});
+
+	// Map each day to its overnight lodging
+	let overnightByDate = $derived.by(() => {
+		const map = new Map<string, any>();
+		if (!trip) return map;
+		for (const l of trip.lodging || []) {
+			const checkIn = extractDate(l.check_in);
+			const checkOut = extractDate(l.check_out);
+			if (!checkIn) continue;
+			// Hotel covers every night from check-in to day before check-out
+			const start = new Date(checkIn + 'T00:00:00');
+			const end = checkOut ? new Date(checkOut + 'T00:00:00') : start;
+			for (let d = new Date(start); d < end; d.setDate(d.getDate() + 1)) {
+				const dateStr = d.toISOString().split('T')[0];
+				map.set(dateStr, l);
+			}
+		}
+		return map;
+	});
+
+	// Unscheduled items (no date or date outside trip range)
+	let unscheduled = $derived.by(() => {
+		if (!trip) return [];
+		const items: DayItem[] = [];
+		const start = trip.start_date;
+		const end = trip.end_date;
+
+		for (const t of trip.transportations || []) {
+			const d = extractDate(t.date);
+			if (!d || d < start || d > end) items.push({ type: 'transportation', sortTime: '', data: t });
+		}
+		for (const loc of trip.locations || []) {
+			const d = loc.visit_date || extractDate(loc.start_time);
+			if (!d || d < start || d > end) items.push({ type: 'location', sortTime: '', data: loc });
+		}
+		for (const n of trip.notes || []) {
+			if (!n.date || n.date < start || n.date > end) items.push({ type: 'note', sortTime: '', data: n });
+		}
+		return items;
+	});
+
+	// Hero images — shuffled on each page load
+	let heroImages = $derived.by(() => {
+		const imgs = (trip as any)?.hero_images || [];
+		if (imgs.length <= 1) return imgs;
+		// Fisher-Yates shuffle (copy first to avoid mutating)
+		const shuffled = [...imgs];
+		for (let i = shuffled.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+		}
+		return shuffled;
+	});
+
+	// Stats
+	let totalCash = $derived(
+		(trip?.transportations?.reduce((s, t) => s + (t.cost_cash || 0), 0) || 0) +
+		(trip?.lodging?.reduce((s, l) => s + (l.cost_cash || 0), 0) || 0) +
+		(trip?.locations?.reduce((s, l) => s + (l.cost_cash || 0), 0) || 0)
+	);
+	let totalPoints = $derived(
+		(trip?.transportations?.reduce((s, t) => s + (t.cost_points || 0), 0) || 0) +
+		(trip?.lodging?.reduce((s, l) => s + (l.cost_points || 0), 0) || 0) +
+		(trip?.locations?.reduce((s, l) => s + (l.cost_points || 0), 0) || 0)
+	);
+
+	function extractDate(dateStr: string | undefined): string {
+		if (!dateStr) return '';
+		return dateStr.split('T')[0];
+	}
+
+	function extractTime(dateStr: string | undefined): string {
+		if (!dateStr || !dateStr.includes('T')) return '';
+		return dateStr.split('T')[1]?.split('|')[0] || '';
+	}
+
+	function formatTime(dateStr: string): string {
+		const time = extractTime(dateStr);
+		if (!time) return '';
+		const [h, m] = time.split(':');
+		const hour = parseInt(h);
+		const ampm = hour >= 12 ? 'PM' : 'AM';
+		const h12 = hour % 12 || 12;
+		return `${h12}:${m} ${ampm}`;
+	}
+
+	function formatDateShort(dateStr: string): string {
+		if (!dateStr) return '';
+		const d = new Date(dateStr.split('T')[0] + 'T00:00:00');
+		return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+	}
+
+	function categoryBadgeClass(category: string): string {
+		switch (category) {
+			case 'restaurant': case 'cafe': case 'bar': return 'badge-warning';
+			case 'hike': return 'badge-success';
+			case 'attraction': return 'badge-info';
+			case 'shopping': return 'badge-secondary';
+			default: return 'badge-ghost';
+		}
+	}
+
+	function startAutoplay() {
+		clearInterval(autoplayTimer);
+		autoplayTimer = setInterval(() => {
+			if (heroImages.length > 1) currentSlide = (currentSlide + 1) % heroImages.length;
+		}, 5000);
+	}
+
+	function nextSlide() {
+		if (heroImages.length > 0) currentSlide = (currentSlide + 1) % heroImages.length;
+		startAutoplay(); // reset timer on manual nav
+	}
+	function prevSlide() {
+		if (heroImages.length > 0) currentSlide = (currentSlide - 1 + heroImages.length) % heroImages.length;
+		startAutoplay();
+	}
+
+	// Start autoplay when hero images are available
+	$effect(() => {
+		if (heroImages.length > 1) {
+			startAutoplay();
+		}
+		return () => clearInterval(autoplayTimer);
+	});
+
+	// Auto-expand today's day or first day with items (only on initial load)
+	let hasAutoExpanded = $state(false);
+	$effect(() => {
+		if (days.length > 0 && !hasAutoExpanded) {
+			hasAutoExpanded = true;
+			const today = new Date().toISOString().split('T')[0];
+			const todayDay = days.find(d => d.date === today && d.items.length > 0);
+			if (todayDay) {
+				expandedDays = new Set([todayDay.date]);
+			} else {
+				const first = days.find(d => d.items.length > 0);
+				if (first) expandedDays = new Set([first.date]);
+			}
+		}
+	});
+
+	function toggleDay(date: string) {
+		const next = new Set(expandedDays);
+		if (next.has(date)) {
+			next.delete(date);
+		} else {
+			next.add(date);
+		}
+		expandedDays = next;
+	}
+
+	function expandAll() {
+		expandedDays = new Set(days.filter(d => d.items.length > 0).map(d => d.date));
+	}
+
+	function collapseAll() {
+		expandedDays = new Set();
+	}
+</script>
+
+{#if loading}
+	<div class="flex justify-center py-20">
+		<span class="loading loading-spinner loading-lg text-primary"></span>
+	</div>
+{:else if error || !trip}
+	<div class="container mx-auto px-4 py-8">
+		<div class="alert alert-error"><span>{error || 'Trip not found'}</span></div>
+	</div>
+{:else}
+	<!-- Hero Image Carousel -->
+	{#if heroImages.length > 0}
+		<div class="relative w-full h-64 md:h-80 overflow-hidden bg-base-300">
+			{#each heroImages as img, i}
+				<div
+					class="absolute inset-0 transition-opacity duration-500"
+					class:opacity-100={i === currentSlide}
+					class:opacity-0={i !== currentSlide}
+				>
+					<img src={img.url} alt="" class="w-full h-full object-cover" />
+				</div>
+			{/each}
+			<!-- Gradient overlay -->
+			<div class="absolute inset-0 bg-gradient-to-t from-base-100 via-base-100/10 to-black/30"></div>
+			<!-- Trip info centered on carousel -->
+			<div class="absolute inset-0 flex flex-col items-center justify-center text-center px-6">
+				<h1 class="text-5xl md:text-6xl font-extrabold text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.7)]">{trip.name}</h1>
+				<div class="flex flex-wrap items-center justify-center gap-2 mt-4">
+					{#if trip.start_date}
+						<span class="badge badge-lg bg-primary border-0 text-white gap-1.5 px-4 py-3">
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/>
+							</svg>
+							{formatDateShort(trip.start_date)} - {formatDateShort(trip.end_date)}
+						</span>
+					{/if}
+					{#if (trip.locations?.length || 0) > 0}
+						<span class="badge badge-lg bg-accent border-0 text-white gap-1.5 px-4 py-3">
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+							</svg>
+							{trip.locations.length} Locations
+						</span>
+					{/if}
+				</div>
+			</div>
+			<!-- Top buttons -->
+			<div class="absolute top-4 left-4 right-4 flex justify-between z-10">
+				<a href="/" class="inline-flex items-center gap-1 text-sm text-white/60 hover:text-white transition-colors bg-black/20 rounded-lg px-3 py-1.5">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
+					</svg>
+					Back
+				</a>
+				<button class="inline-flex items-center gap-1 text-sm text-white/60 hover:text-white transition-colors bg-black/20 rounded-lg px-3 py-1.5" onclick={() => showTripEditModal = true}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+					</svg>
+					Edit
+				</button>
+			</div>
+			<!-- Navigation arrows -->
+			{#if heroImages.length > 1}
+				<button class="absolute left-3 top-1/2 -translate-y-1/2 btn btn-circle btn-sm bg-black/30 border-0 hover:bg-black/50 text-white" onclick={prevSlide}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+				</button>
+				<button class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-circle btn-sm bg-black/30 border-0 hover:bg-black/50 text-white" onclick={nextSlide}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+				</button>
+				<!-- Image counter -->
+				<div class="absolute bottom-4 right-4 badge bg-black/40 border-0 text-white text-xs">
+					{currentSlide + 1} / {heroImages.length}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="container mx-auto px-4 py-6 max-w-4xl">
+		<!-- Header (only when no hero images) -->
+		{#if heroImages.length === 0}
+			<div class="flex items-start justify-between mb-4">
+				<div>
+					<a href="/" class="btn btn-ghost btn-sm gap-1 mb-2 -ml-2">
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
+						</svg>
+						Back
+					</a>
+					<h1 class="text-3xl font-bold text-base-content">{trip.name}</h1>
+					{#if trip.start_date}
+						<p class="text-base-content/50 mt-1">{formatDateShort(trip.start_date)} — {formatDateShort(trip.end_date)}</p>
+					{/if}
+					{#if trip.description}
+						<p class="text-sm text-base-content/40 mt-1">{trip.description}</p>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Stats -->
+		<div class="flex flex-wrap justify-center gap-6 mb-8 py-4">
+			<div class="text-center">
+				<div class="text-2xl font-bold text-base-content">{trip.transportations?.length || 0}</div>
+				<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Transport</div>
+			</div>
+			<div class="divider divider-horizontal mx-0"></div>
+			<div class="text-center">
+				<div class="text-2xl font-bold text-base-content">{trip.lodging?.length || 0}</div>
+				<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Lodging</div>
+			</div>
+			<div class="divider divider-horizontal mx-0"></div>
+			<div class="text-center">
+				<div class="text-2xl font-bold text-base-content">{trip.locations?.length || 0}</div>
+				<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Activities</div>
+			</div>
+			{#if totalPoints > 0}
+				<div class="divider divider-horizontal mx-0"></div>
+				<div class="text-center">
+					<div class="text-2xl font-bold text-base-content">{totalPoints.toLocaleString()}</div>
+					<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Points</div>
+				</div>
+			{/if}
+			{#if totalCash > 0}
+				<div class="divider divider-horizontal mx-0"></div>
+				<div class="text-center">
+					<div class="text-2xl font-bold text-base-content">${totalCash.toLocaleString()}</div>
+					<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Cost</div>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Itinerary by Day -->
+		<div class="flex justify-between items-center mb-4">
+			<div class="flex gap-1">
+				<button class="btn btn-ghost btn-sm gap-2 text-base-content/50" onclick={() => showMapModal = true}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+					</svg>
+					Map
+				</button>
+				<button class="btn btn-ghost btn-sm gap-2 text-base-content/50" onclick={() => showAIGuide = true}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+					</svg>
+					AI Guide
+				</button>
+			</div>
+			<div class="flex gap-2">
+				<button class="btn btn-ghost btn-xs text-base-content/40" onclick={expandAll}>Expand all</button>
+				<button class="btn btn-ghost btn-xs text-base-content/40" onclick={collapseAll}>Collapse all</button>
+			</div>
+		</div>
+		<div class="space-y-3">
+			{#each days as day}
+				<section>
+					<!-- Day header (clickable if has items) -->
+					<button
+						class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-base-200 transition-colors {day.items.length > 0 ? 'cursor-pointer' : 'cursor-default opacity-50'}"
+						onclick={() => { if (day.items.length > 0) toggleDay(day.date); }}
+					>
+						<div class="w-10 h-10 rounded-full {day.items.length > 0 ? 'bg-primary/15' : 'bg-base-300'} flex items-center justify-center shrink-0">
+							<span class="text-sm font-bold {day.items.length > 0 ? 'text-primary' : 'text-base-content/30'}">{day.dayNumber}</span>
+						</div>
+						<div class="flex-1 text-left">
+							<div class="font-semibold {day.items.length > 0 ? 'text-base-content' : 'text-base-content/40'}">
+								{day.dayLabel}
+								{#if weather[day.date]}
+									<span class="text-xs font-normal text-base-content/50 ml-2">
+										{weather[day.date].high}°/{weather[day.date].low}°
+										{#if weather[day.date].description} · {weather[day.date].description}{/if}
+									</span>
+								{/if}
+							</div>
+							<div class="text-xs text-base-content/40">Day {day.dayNumber}{#if day.items.length > 0} · {day.items.length} {day.items.length === 1 ? 'item' : 'items'}{:else} · No plans yet{/if}</div>
+						</div>
+						{#if day.items.length > 0}
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/30 transition-transform {expandedDays.has(day.date) ? 'rotate-180' : ''}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<polyline points="6 9 12 15 18 9"/>
+							</svg>
+						{/if}
+					</button>
+
+						<!-- Day items (collapsible) -->
+						{#if expandedDays.has(day.date)}
+						<div class="ml-5 border-l-2 border-base-300 pl-6 space-y-3 mt-2">
+							{#each day.items as item}
+								{#if item.type === 'transportation'}
+									{@const t = item.data}
+									<div class="card bg-base-200 border border-base-300 shadow-sm hover:border-primary/30 transition-colors cursor-pointer" onclick={() => openTransportEdit(t)}>
+										{#if t.images?.length > 0}
+											<figure class="h-32"><img src={t.images[0].url} alt="" class="w-full h-full object-cover" /></figure>
+										{/if}
+										<div class="card-body p-3">
+											<div class="flex items-center gap-3">
+												<div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+													<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+														{#if t.type === 'plane'}<path d="M22 16.21v-1.895L14 8.42V4a2 2 0 1 0-4 0v4.42L2 14.315v1.895l8-2.526V18l-2 1.5V21l4-1 4 1v-1.5L16 18v-4.316z"/>
+														{:else if t.type === 'train'}<path d="M4 11V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7m-16 0v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6m-16 0h16"/>
+														{:else}<path d="M5 17h14M5 17a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2M5 17l-1 3h16l-1-3"/>{/if}
+													</svg>
+												</div>
+												<div class="flex-1 min-w-0">
+													<div class="font-semibold text-sm">{t.name || t.flight_number || `${t.from_location} → ${t.to_location}`}</div>
+													<div class="text-xs text-base-content/50">{t.from_location} → {t.to_location}{#if t.flight_number} · {t.flight_number}{/if}</div>
+												</div>
+												<div class="text-right shrink-0">
+													{#if t.date}<div class="text-xs font-medium">{formatTime(t.date)}</div>{/if}
+													{#if t.cost_points}<div class="badge badge-sm badge-primary badge-outline mt-1">{t.cost_points.toLocaleString()} pts</div>{/if}
+													{#if t.cost_cash}<div class="badge badge-sm badge-outline mt-1">${t.cost_cash}</div>{/if}
+												</div>
+											</div>
+											{#if t.to_lat || t.to_place_id || t.to_location}
+												<div class="flex justify-end mt-1">
+													<MapsButton lat={t.to_lat} lng={t.to_lng} name={t.to_location} placeId={t.to_place_id} />
+												</div>
+											{/if}
+										</div>
+									</div>
+
+								{:else if item.type === 'location'}
+									{@const loc = item.data}
+									<div class="card bg-base-200 border border-base-300 shadow-sm hover:border-accent/30 transition-colors cursor-pointer" onclick={() => openLocationEdit(loc)}>
+										{#if loc.images?.length > 0}
+											<figure class="h-32"><img src={loc.images[0].url} alt="" class="w-full h-full object-cover" /></figure>
+										{/if}
+										<div class="card-body p-3">
+											<div class="flex items-center gap-3">
+												<div class="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center shrink-0">
+													<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+														<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+													</svg>
+												</div>
+												<div class="flex-1 min-w-0">
+													<div class="flex items-center gap-2">
+														<span class="font-semibold text-sm">{loc.name}</span>
+														{#if loc.category}<span class="badge badge-xs {categoryBadgeClass(loc.category)}">{loc.category}</span>{/if}
+													</div>
+													{#if loc.address}<div class="text-xs text-base-content/40 truncate">{loc.address}</div>{/if}
+												</div>
+												<div class="text-right shrink-0">
+													{#if loc.start_time}
+														<div class="text-xs font-medium">{formatTime(loc.start_time)}</div>
+														{#if loc.end_time}<div class="text-xs text-base-content/40">— {formatTime(loc.end_time)}</div>{/if}
+													{/if}
+													{#if loc.cost_points}<div class="badge badge-sm badge-primary badge-outline mt-1">{loc.cost_points.toLocaleString()} pts</div>{/if}
+												</div>
+											</div>
+											{#if loc.description}
+												<div class="text-xs text-base-content/50 mt-2 line-clamp-2">{@html loc.description}</div>
+											{/if}
+											{#if loc.latitude || loc.place_id || loc.address}
+												<div class="flex justify-end mt-1">
+													<MapsButton lat={loc.latitude} lng={loc.longitude} name={loc.name} address={loc.address} placeId={loc.place_id} />
+												</div>
+											{/if}
+										</div>
+									</div>
+
+								{:else if item.type === 'note'}
+									{@const n = item.data}
+									<div class="card bg-base-200 border border-base-300 shadow-sm border-l-4 border-l-warning cursor-pointer" onclick={() => openNoteEdit(n)}>
+										<div class="card-body p-3">
+											<div class="flex items-center gap-2">
+												<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-warning shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+													<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>
+												</svg>
+												<span class="font-semibold text-sm">{n.name}</span>
+											</div>
+											{#if n.content}
+												<div class="text-xs text-base-content/60 mt-1 prose prose-sm max-w-none">{@html n.content}</div>
+											{/if}
+										</div>
+									</div>
+								{/if}
+							{/each}
+						</div>
+						{/if}
+
+						<!-- Staying overnight -->
+						{#if overnightByDate.has(day.date)}
+							{@const hotel = overnightByDate.get(day.date)}
+							<div class="mt-3 ml-5 pl-6 border-l-2 border-dashed border-secondary/30">
+								<div class="text-sm text-base-content/60 font-medium mb-1.5 flex items-center gap-1.5">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<path d="M3 14h18v7H3z"/><path d="M3 7v7"/><path d="M21 7v7"/><path d="M3 7l9-4 9 4"/>
+									</svg>
+									Staying overnight
+								</div>
+								<div class="flex items-center gap-3 py-2 px-3 rounded-lg bg-secondary/5 border border-secondary/10 cursor-pointer hover:border-secondary/30 transition-colors" onclick={() => openLodgingEdit(hotel)}>
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-secondary/60 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+										<path d="M3 14h18v7H3z"/><path d="M3 7v7"/><path d="M21 7v7"/><path d="M3 7l9-4 9 4"/>
+									</svg>
+									<div class="flex-1 min-w-0">
+										<span class="text-sm text-base-content/70">{hotel.name}</span>
+									</div>
+									<span class="text-xs text-base-content/30 shrink-0">Check out: {formatDateShort(hotel.check_out)}</span>
+									<MapsButton lat={hotel.latitude} lng={hotel.longitude} name={hotel.name} address={hotel.location} placeId={hotel.place_id} />
+								</div>
+							</div>
+						{/if}
+					</section>
+			{/each}
+
+			<!-- Unscheduled items -->
+			{#if unscheduled.length > 0}
+				<section>
+					<div class="flex items-center gap-3 mb-3">
+						<div class="w-10 h-10 rounded-full bg-base-300 flex items-center justify-center shrink-0">
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/>
+							</svg>
+						</div>
+						<div>
+							<div class="font-semibold text-base-content">Unscheduled</div>
+							<div class="text-xs text-base-content/40">Not assigned to a day</div>
+						</div>
+					</div>
+					<div class="ml-5 border-l-2 border-base-300/50 border-dashed pl-6 space-y-3">
+						{#each unscheduled as item}
+							{@const d = item.data}
+							<div class="card bg-base-200 border border-base-300 shadow-sm">
+								<div class="card-body p-3">
+									<div class="flex items-center gap-2">
+										<span class="badge badge-sm badge-ghost">{item.type}</span>
+										<span class="font-semibold text-sm">{d.name || d.flight_number || 'Untitled'}</span>
+									</div>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</section>
+			{/if}
+
+			<!-- Empty state -->
+			{#if days.every(d => d.items.length === 0) && unscheduled.length === 0}
+				<div class="text-center py-16">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-base-content/15 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+						<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
+					</svg>
+					<h3 class="text-lg font-semibold text-base-content/50 mb-1">No items yet</h3>
+					<p class="text-sm text-base-content/30">Tap + to start planning</p>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Floating Action Button -->
+	<div class="fixed bottom-6 right-6 z-50">
+		{#if fabOpen}
+			<div class="flex flex-col-reverse gap-2 mb-3">
+				<button class="btn btn-sm btn-primary shadow-lg gap-2" onclick={openNewLocation}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+					Activity
+				</button>
+				<button class="btn btn-sm btn-secondary shadow-lg gap-2" onclick={openNewLodging}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 14h18v7H3z"/><path d="M3 7v7"/><path d="M21 7v7"/><path d="M3 7l9-4 9 4"/></svg>
+					Lodging
+				</button>
+				<button class="btn btn-sm btn-info shadow-lg gap-2" onclick={openNewTransport}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.21v-1.895L14 8.42V4a2 2 0 1 0-4 0v4.42L2 14.315v1.895l8-2.526V18l-2 1.5V21l4-1 4 1v-1.5L16 18v-4.316z"/></svg>
+					Transport
+				</button>
+				<button class="btn btn-sm btn-warning shadow-lg gap-2" onclick={openNewNote}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
+					Note
+				</button>
+				<button class="btn btn-sm btn-accent shadow-lg gap-2" onclick={() => { showParseModal = true; fabOpen = false; }}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+					AI Parse
+				</button>
+			</div>
+		{/if}
+		<button
+			class="btn btn-primary btn-circle w-14 h-14 shadow-2xl hover:shadow-primary/25 transition-all duration-200 {fabOpen ? 'rotate-45' : ''}"
+			onclick={() => fabOpen = !fabOpen}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+				<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+			</svg>
+		</button>
+	</div>
+
+	<!-- Backdrop when FAB is open -->
+	{#if fabOpen}
+		<div class="fixed inset-0 bg-black/20 z-40" onclick={() => fabOpen = false}></div>
+	{/if}
+
+	<!-- Modals -->
+	{#if showAIGuide}
+		<AIGuideModal {tripId} tripName={trip.name} onClose={() => showAIGuide = false} />
+	{/if}
+	{#if showMapModal}
+		<TripMap {trip} onClose={() => showMapModal = false} />
+	{/if}
+	{#if showParseModal}
+		<ParseModal {tripId} tripStart={trip.start_date} tripEnd={trip.end_date} onParsed={() => { showParseModal = false; loadTrip(tripId); }} onClose={() => showParseModal = false} />
+	{/if}
+	{#if showTripEditModal}
+		<TripEditModal {trip} onSave={() => { showTripEditModal = false; loadTrip(tripId); }} onClose={() => showTripEditModal = false} />
+	{/if}
+	{#if showLocationModal}
+		<LocationModal location={editLocation} tripId={trip.id} tripStart={trip.start_date} tripEnd={trip.end_date} onSave={handleModalSave} onDelete={handleModalDelete} onClose={handleModalClose} />
+	{/if}
+	{#if showLodgingModal}
+		<LodgingModal lodging={editLodging} tripId={trip.id} tripStart={trip.start_date} tripEnd={trip.end_date} onSave={handleModalSave} onDelete={handleModalDelete} onClose={handleModalClose} />
+	{/if}
+	{#if showTransportModal}
+		<TransportModal transport={editTransport} tripId={trip.id} tripStart={trip.start_date} tripEnd={trip.end_date} onSave={handleModalSave} onDelete={handleModalDelete} onClose={handleModalClose} />
+	{/if}
+	{#if showNoteModal}
+		<NoteModal note={editNote} tripId={trip.id} onSave={handleModalSave} onDelete={handleModalDelete} onClose={handleModalClose} />
+	{/if}
+{/if}
--- a/services/trips/frontend-legacy/src/routes/view/[token]/+page.svelte
+++ b/services/trips/frontend-legacy/src/routes/view/[token]/+page.svelte
@@ -0,0 +1,264 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	interface ShareTrip {
+		name: string;
+		description: string;
+		start_date: string;
+		end_date: string;
+		transportations: any[];
+		lodging: any[];
+		locations: any[];
+		notes: any[];
+		hero_images: any[];
+	}
+
+	let trip = $state<ShareTrip | null>(null);
+	let loading = $state(true);
+	let error = $state('');
+	let currentSlide = $state(0);
+
+	let token = $derived(page.params.token);
+
+	$effect(() => {
+		if (token) loadShareTrip(token);
+	});
+
+	async function loadShareTrip(t: string) {
+		loading = true;
+		try {
+			const res = await fetch(`/api/share/trip/${t}`);
+			if (res.ok) {
+				trip = await res.json();
+			} else {
+				error = 'Trip not found or link expired';
+			}
+		} catch {
+			error = 'Failed to load trip';
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Auto-rotate carousel
+	let autoplayTimer: ReturnType<typeof setInterval>;
+	$effect(() => {
+		if ((trip?.hero_images?.length || 0) > 1) {
+			autoplayTimer = setInterval(() => {
+				currentSlide = (currentSlide + 1) % (trip?.hero_images?.length || 1);
+			}, 5000);
+		}
+		return () => clearInterval(autoplayTimer);
+	});
+
+	function formatDateShort(d: string): string {
+		if (!d) return '';
+		return new Date(d + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+	}
+
+	function formatTime(dateStr: string): string {
+		if (!dateStr || !dateStr.includes('T')) return '';
+		const timePart = dateStr.split('T')[1]?.split('|')[0];
+		if (!timePart) return '';
+		const [h, m] = timePart.split(':');
+		const hour = parseInt(h);
+		const ampm = hour >= 12 ? 'PM' : 'AM';
+		const h12 = hour % 12 || 12;
+		return `${h12}:${m} ${ampm}`;
+	}
+
+	function extractDate(d: string | undefined): string {
+		if (!d) return '';
+		return d.split('T')[0];
+	}
+
+	function categoryBadgeClass(cat: string): string {
+		switch (cat) {
+			case 'restaurant': case 'cafe': case 'bar': return 'badge-warning';
+			case 'hike': return 'badge-success';
+			case 'attraction': return 'badge-info';
+			default: return 'badge-ghost';
+		}
+	}
+
+	// Build day groups
+	let days = $derived.by(() => {
+		if (!trip?.start_date || !trip?.end_date) return [];
+		const start = new Date(trip.start_date + 'T00:00:00');
+		const end = new Date(trip.end_date + 'T00:00:00');
+		const dayMap = new Map<string, { date: string; label: string; num: number; items: any[] }>();
+
+		let num = 1;
+		for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+			const ds = d.toISOString().split('T')[0];
+			dayMap.set(ds, {
+				date: ds,
+				label: d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' }),
+				num: num++,
+				items: []
+			});
+		}
+
+		for (const t of trip.transportations || []) {
+			const d = extractDate(t.date);
+			if (d && dayMap.has(d)) dayMap.get(d)!.items.push({ type: 'transport', data: t });
+		}
+		for (const loc of trip.locations || []) {
+			const d = loc.visit_date || extractDate(loc.start_time);
+			if (d && dayMap.has(d)) dayMap.get(d)!.items.push({ type: 'location', data: loc });
+		}
+		for (const n of trip.notes || []) {
+			if (n.date && dayMap.has(n.date)) dayMap.get(n.date)!.items.push({ type: 'note', data: n });
+		}
+
+		return Array.from(dayMap.values());
+	});
+
+	// Overnight lodging
+	let overnightByDate = $derived.by(() => {
+		const map = new Map<string, any>();
+		if (!trip) return map;
+		for (const l of trip.lodging || []) {
+			const checkIn = extractDate(l.check_in);
+			const checkOut = extractDate(l.check_out);
+			if (!checkIn) continue;
+			const start = new Date(checkIn + 'T00:00:00');
+			const end = checkOut ? new Date(checkOut + 'T00:00:00') : start;
+			for (let d = new Date(start); d < end; d.setDate(d.getDate() + 1)) {
+				map.set(d.toISOString().split('T')[0], l);
+			}
+		}
+		return map;
+	});
+</script>
+
+<svelte:head>
+	<title>{trip?.name || 'Shared Trip'}</title>
+</svelte:head>
+
+{#if loading}
+	<div class="flex justify-center py-20">
+		<span class="loading loading-spinner loading-lg text-primary"></span>
+	</div>
+{:else if error || !trip}
+	<div class="container mx-auto px-4 py-20 text-center">
+		<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-base-content/20 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+		<h2 class="text-xl font-bold text-base-content/60">{error || 'Trip not found'}</h2>
+	</div>
+{:else}
+	<!-- Hero carousel -->
+	{#if trip.hero_images && trip.hero_images.length > 0}
+		<div class="relative w-full h-64 md:h-80 overflow-hidden bg-base-300">
+			{#each trip.hero_images as img, i}
+				<div class="absolute inset-0 transition-opacity duration-500" class:opacity-100={i === currentSlide} class:opacity-0={i !== currentSlide}>
+					<img src={img.url} alt="" class="w-full h-full object-cover" />
+				</div>
+			{/each}
+			<div class="absolute inset-0 bg-gradient-to-t from-base-100 via-base-100/10 to-black/30"></div>
+			<div class="absolute inset-0 flex flex-col items-center justify-center text-center px-6">
+				<h1 class="text-5xl md:text-6xl font-extrabold text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.7)]">{trip.name}</h1>
+				{#if trip.start_date}
+					<span class="badge badge-lg bg-primary border-0 text-white gap-1.5 px-4 py-3 mt-4">
+						{formatDateShort(trip.start_date)} - {formatDateShort(trip.end_date)}
+					</span>
+				{/if}
+			</div>
+			{#if trip.hero_images.length > 1}
+				<div class="absolute bottom-4 right-4 badge bg-black/40 border-0 text-white text-xs">
+					{currentSlide + 1} / {trip.hero_images.length}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="container mx-auto px-4 py-6 max-w-4xl">
+		<!-- Shared badge -->
+		<div class="flex justify-center mb-6">
+			<span class="badge badge-outline gap-1 text-base-content/40">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
+				Shared Trip
+			</span>
+		</div>
+
+		{#if !trip.start_date}
+			<h1 class="text-3xl font-bold text-base-content text-center mb-6">{trip.name}</h1>
+		{/if}
+
+		<!-- Itinerary -->
+		<div class="space-y-3">
+			{#each days as day}
+				{#if day.items.length > 0}
+					<section>
+						<div class="flex items-center gap-3 p-3">
+							<div class="w-10 h-10 rounded-full bg-primary/15 flex items-center justify-center shrink-0">
+								<span class="text-sm font-bold text-primary">{day.num}</span>
+							</div>
+							<div>
+								<div class="font-semibold text-base-content">{day.label}</div>
+								<div class="text-xs text-base-content/40">Day {day.num} · {day.items.length} items</div>
+							</div>
+						</div>
+
+						<div class="ml-5 border-l-2 border-base-300 pl-6 space-y-3">
+							{#each day.items as item}
+								{#if item.type === 'transport'}
+									{@const t = item.data}
+									<div class="card bg-base-200 border border-base-300 shadow-sm">
+										<div class="card-body p-3">
+											<div class="flex items-center gap-3">
+												<div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+													<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.21v-1.895L14 8.42V4a2 2 0 1 0-4 0v4.42L2 14.315v1.895l8-2.526V18l-2 1.5V21l4-1 4 1v-1.5L16 18v-4.316z"/></svg>
+												</div>
+												<div class="flex-1 min-w-0">
+													<div class="font-semibold text-sm">{t.name || t.flight_number || `${t.from_location} → ${t.to_location}`}</div>
+													<div class="text-xs text-base-content/50">{t.from_location} → {t.to_location}</div>
+												</div>
+												{#if t.date}<div class="text-xs font-medium shrink-0">{formatTime(t.date)}</div>{/if}
+											</div>
+										</div>
+									</div>
+								{:else if item.type === 'location'}
+									{@const loc = item.data}
+									<div class="card bg-base-200 border border-base-300 shadow-sm">
+										{#if loc.images?.length > 0}
+											<figure class="h-32"><img src={loc.images[0].url} alt="" class="w-full h-full object-cover" /></figure>
+										{/if}
+										<div class="card-body p-3">
+											<div class="flex items-center gap-2">
+												<span class="font-semibold text-sm">{loc.name}</span>
+												{#if loc.category}<span class="badge badge-xs {categoryBadgeClass(loc.category)}">{loc.category}</span>{/if}
+											</div>
+											{#if loc.address}<div class="text-xs text-base-content/40">{loc.address}</div>{/if}
+											{#if loc.description}<div class="text-xs text-base-content/50 mt-1 line-clamp-2">{@html loc.description}</div>{/if}
+										</div>
+									</div>
+								{:else if item.type === 'note'}
+									{@const n = item.data}
+									<div class="card bg-base-200 border border-base-300 shadow-sm border-l-4 border-l-warning">
+										<div class="card-body p-3">
+											<div class="font-semibold text-sm">{n.name}</div>
+											{#if n.content}<div class="text-xs text-base-content/60 mt-1">{@html n.content}</div>{/if}
+										</div>
+									</div>
+								{/if}
+							{/each}
+						</div>
+
+						{#if overnightByDate.has(day.date)}
+							{@const hotel = overnightByDate.get(day.date)}
+							<div class="mt-3 ml-5 pl-6 border-l-2 border-dashed border-secondary/30">
+								<div class="text-sm text-base-content/60 font-medium mb-1.5 flex items-center gap-1.5">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 14h18v7H3z"/><path d="M3 7v7"/><path d="M21 7v7"/><path d="M3 7l9-4 9 4"/></svg>
+									Staying overnight
+								</div>
+								<div class="flex items-center gap-3 py-2 px-3 rounded-lg bg-secondary/5 border border-secondary/10">
+									<span class="text-sm text-base-content/70">{hotel.name}</span>
+								</div>
+							</div>
+						{/if}
+					</section>
+				{/if}
+			{/each}
+		</div>
+	</div>
+{/if}
--- a/services/trips/frontend-legacy/static/robots.txt
+++ b/services/trips/frontend-legacy/static/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
--- a/services/trips/frontend-legacy/svelte.config.js
+++ b/services/trips/frontend-legacy/svelte.config.js
@@ -0,0 +1,14 @@
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	},
+	vitePlugin: {
+		dynamicCompileOptions: ({ filename }) =>
+			filename.includes('node_modules') ? undefined : { runes: true }
+	}
+};
+
+export default config;
--- a/services/trips/frontend-legacy/tsconfig.json
+++ b/services/trips/frontend-legacy/tsconfig.json
@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}
--- a/services/trips/frontend-legacy/vite.config.ts
+++ b/services/trips/frontend-legacy/vite.config.ts
@@ -0,0 +1,19 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()],
+	server: {
+		proxy: {
+			'/api': {
+				target: 'http://localhost:8087',
+				changeOrigin: true
+			},
+			'/images': {
+				target: 'http://localhost:8087',
+				changeOrigin: true
+			}
+		}
+	}
+});
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
				`@@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.