feat(bookings): show transport routes on map (#384, #587)

Adds from/to endpoints to flight/train/cruise/car reservations with live map rendering. Flights use geodesic arcs and a curved duration + distance badge; train/car/cruise render as straight or geodesic lines with endpoint markers. Airports come from an embedded OurAirports database (~3200 airports, offline-capable); train/cruise/car locations via Nominatim. Per-trip connection toggle sits in the day plan sidebar, persisted in localStorage. Clicking a map endpoint opens the existing transport detail popup. New display setting toggles endpoint labels on the map. Migration 105 adds the reservation_endpoints table plus needs_review flag; existing flights are backfilled from their IATA metadata on server startup.
2026-06-19 13:21:46 +00:00 · 2026-04-17 14:04:40 +02:00
parent 21511c2f68
commit 8defc90e95
26 changed files with 1437 additions and 81 deletions
@@ -16,7 +16,8 @@ client/public/icons/*.png
 *.sqlite-wal
 # User data
-server/data/
+server/data/*
 !server/data/airports.json
 server/uploads/
 # Environment
@@ -365,6 +365,11 @@ export const mapsApi = {
  resolveUrl: (url: string) => apiClient.post('/maps/resolve-url', { url }).then(r => r.data),
 }
 export const airportsApi = {
  search: (q: string, signal?: AbortSignal) => apiClient.get('/airports/search', { params: { q }, signal }).then(r => r.data),
  byIata: (iata: string) => apiClient.get(`/airports/${encodeURIComponent(iata)}`).then(r => r.data),
 }
 export const budgetApi = {
  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget`).then(r => r.data),
  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/budget`, data).then(r => r.data),
@@ -8,6 +8,8 @@ import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import { mapsApi } from '../../api/client'
 import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import ReservationOverlay from './ReservationOverlay'
 import type { Reservation } from '../../types'
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
  const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -384,7 +386,16 @@ export const MapView = memo(function MapView({
  rightWidth = 0,
  hasInspector = false,
  hasDayDetail = false,
-}) {
+  reservations = [] as Reservation[],
  showReservationStats = false,
  visibleConnectionIds = [] as number[],
  onReservationClick,
 }: any) {
  const visibleReservations = useMemo(() => {
    if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
    const set = new Set(visibleConnectionIds)
    return reservations.filter((r: Reservation) => set.has(r.id))
  }, [reservations, visibleConnectionIds])
  // Dynamic padding: account for sidebars + bottom inspector + day detail panel
  const paddingOpts = useMemo(() => {
    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
@@ -569,6 +580,13 @@ export const MapView = memo(function MapView({
          )
        } catch { return null }
      })}
      <ReservationOverlay
        reservations={visibleReservations}
        showConnections
        showStats={showReservationStats}
        onEndpointClick={onReservationClick}
      />
    </MapContainer>
  )
 })
@@ -0,0 +1,446 @@
 import { createElement, useEffect, useMemo, useRef, useState } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { Marker, Polyline, Tooltip, useMap, useMapEvents } from 'react-leaflet'
 import L from 'leaflet'
 import { Plane, Train, Ship, Car } from 'lucide-react'
 import { useSettingsStore } from '../../store/settingsStore'
 import type { Reservation, ReservationEndpoint } from '../../types'
 const ENDPOINT_PANE = 'reservation-endpoints'
 const AIRPORT_BADGE_HALF_PX = 16
 const BADGE_GAP_PX = 5
 type TransportType = 'flight' | 'train' | 'cruise' | 'car'
 const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car']
 const TRANSPORT_COLOR = '#3b82f6'
 const TYPE_META: Record<TransportType, { color: string; icon: typeof Plane; geodesic: boolean }> = {
  flight: { color: TRANSPORT_COLOR, icon: Plane, geodesic: true },
  train: { color: TRANSPORT_COLOR, icon: Train, geodesic: false },
  cruise: { color: TRANSPORT_COLOR, icon: Ship, geodesic: true },
  car: { color: TRANSPORT_COLOR, icon: Car, geodesic: false },
 }
 function useEndpointPane() {
  const map = useMap()
  useMemo(() => {
    if (!map.getPane(ENDPOINT_PANE)) {
      const pane = map.createPane(ENDPOINT_PANE)
      pane.style.zIndex = '650'
      pane.style.pointerEvents = 'auto'
    }
  }, [map])
 }
 function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
  const { icon: IconCmp, color } = TYPE_META[type]
  const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
  const labelHtml = label ? `<span>${label}</span>` : ''
  const estWidth = label ? Math.max(40, label.length * 6 + 28) : 26
  return L.divIcon({
    className: 'trek-endpoint-marker',
    html: `<div style="
      display:inline-flex;align-items:center;justify-content:center;gap:4px;
      padding:0 8px;border-radius:999px;
      background:${color};box-shadow:0 2px 6px rgba(0,0,0,0.25);
      border:1.5px solid #fff;color:#fff;
      font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
      box-sizing:border-box;height:22px;white-space:nowrap;
    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''}</div>`,
    iconSize: [estWidth, 22],
    iconAnchor: [estWidth / 2, 11],
    popupAnchor: [0, -11],
  })
 }
 function toRad(d: number) { return d * Math.PI / 180 }
 function toDeg(r: number) { return r * 180 / Math.PI }
 function greatCircle(a: [number, number], b: [number, number], steps = 256): [number, number][] {
  const [lat1, lng1] = [toRad(a[0]), toRad(a[1])]
  const [lat2, lng2] = [toRad(b[0]), toRad(b[1])]
  const d = 2 * Math.asin(Math.sqrt(Math.sin((lat2 - lat1) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lng2 - lng1) / 2) ** 2))
  if (d === 0) return [a, b]
  const pts: [number, number][] = []
  for (let i = 0; i <= steps; i++) {
    const f = i / steps
    const A = Math.sin((1 - f) * d) / Math.sin(d)
    const B = Math.sin(f * d) / Math.sin(d)
    const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2)
    const y = A * Math.cos(lat1) * Math.sin(lng1) + B * Math.cos(lat2) * Math.sin(lng2)
    const z = A * Math.sin(lat1) + B * Math.sin(lat2)
    const lat = Math.atan2(z, Math.sqrt(x * x + y * y))
    const lng = Math.atan2(y, x)
    pts.push([toDeg(lat), toDeg(lng)])
  }
  return pts
 }
 function splitAntimeridian(points: [number, number][]): [number, number][][] {
  const segments: [number, number][][] = []
  let cur: [number, number][] = []
  for (let i = 0; i < points.length; i++) {
    if (i > 0 && Math.abs(points[i][1] - points[i - 1][1]) > 180) {
      if (cur.length > 1) segments.push(cur)
      cur = []
    }
    cur.push(points[i])
  }
  if (cur.length > 1) segments.push(cur)
  return segments
 }
 function cleanName(name: string): string {
  return name.replace(/\s*\([^)]*\)/g, '').trim()
 }
 function haversineKm(a: [number, number], b: [number, number]): number {
  const R = 6371
  const dLat = toRad(b[0] - a[0])
  const dLng = toRad(b[1] - a[1])
  const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(a[0])) * Math.cos(toRad(b[0])) * Math.sin(dLng / 2) ** 2
  return 2 * R * Math.asin(Math.sqrt(h))
 }
 function parseInTz(isoLocal: string, tz: string): number {
  const [datePart, timePart] = isoLocal.split('T')
  const [y, mo, d] = datePart.split('-').map(Number)
  const [h, mi] = (timePart || '00:00').split(':').map(Number)
  const guess = Date.UTC(y, mo - 1, d, h, mi)
  const fmt = new Intl.DateTimeFormat('en-US', {
    timeZone: tz, hour12: false,
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit', second: '2-digit',
  })
  const parts = Object.fromEntries(fmt.formatToParts(new Date(guess)).filter(p => p.type !== 'literal').map(p => [p.type, p.value]))
  const asUtc = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), Number(parts.hour) % 24, Number(parts.minute), Number(parts.second))
  return guess - (asUtc - guess)
 }
 function computeDuration(from: ReservationEndpoint, to: ReservationEndpoint, fallbackStart: string | null, fallbackEnd: string | null): string | null {
  let start = from.local_date && from.local_time ? `${from.local_date}T${from.local_time}` : fallbackStart
  let end = to.local_date && to.local_time ? `${to.local_date}T${to.local_time}` : fallbackEnd
  if (!start || !end) return null
  if (!start.includes('T') && end.includes('T')) start = `${end.split('T')[0]}T${start}`
  if (!end.includes('T') && start.includes('T')) end = `${start.split('T')[0]}T${end}`
  if (!start.includes('T') || !end.includes('T')) return null
  const fromTz = from.timezone || to.timezone
  const toTz = to.timezone || fromTz
  let startMs: number, endMs: number
  if (fromTz && toTz) {
    startMs = parseInTz(start, fromTz)
    endMs = parseInTz(end, toTz)
  } else {
    startMs = new Date(start).getTime()
    endMs = new Date(end).getTime()
  }
  if (!Number.isFinite(startMs) || !Number.isFinite(endMs)) return null
  if (endMs <= startMs) endMs += 24 * 60 * 60000
  const minutes = Math.round((endMs - startMs) / 60000)
  if (minutes <= 0 || minutes > 48 * 60) return null
  const h = Math.floor(minutes / 60)
  const m = minutes % 60
  return h > 0 ? `${h}h ${m}m` : `${m}m`
 }
 interface TransportItem {
  res: Reservation
  from: ReservationEndpoint
  to: ReservationEndpoint
  type: TransportType
  arcs: [number, number][][]
  primaryArc: [number, number][]
  fallback: [number, number]
  mainLabel: string | null
  subLabel: string | null
 }
 function buildStatsHtml(color: string, mainLabel: string | null, subLabel: string | null): { html: string; width: number; height: number } {
  const estWidth = Math.max(
    mainLabel ? mainLabel.length * 6.5 : 0,
    subLabel ? subLabel.length * 5.5 : 0,
  ) + 22
  const hasBoth = !!mainLabel && !!subLabel
  const height = hasBoth ? 36 : 22
  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
  const html = `<div class="trek-stats-inner" style="
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:100%;height:100%;
    padding:0 11px;border-radius:999px;
    background:rgba(17,24,39,0.92);color:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    border:1px solid ${color}aa;
    font-family:-apple-system,system-ui,'SF Pro Text',sans-serif;
    white-space:nowrap;box-sizing:border-box;
    transform-origin:center;
    will-change:transform;
  ">${main}${sub}</div>`
  return { html, width: estWidth, height }
 }
 function StatsLabel({ item }: { item: TransportItem }) {
  const map = useMap()
  const markerRef = useRef<L.Marker | null>(null)
  const innerRef = useRef<HTMLElement | null>(null)
  const arc = item.primaryArc
  const color = TYPE_META[item.type].color
  const { html, width, height } = useMemo(() => buildStatsHtml(color, item.mainLabel, item.subLabel), [color, item.mainLabel, item.subLabel])
  const buffer = AIRPORT_BADGE_HALF_PX + width / 2 + BADGE_GAP_PX
  const compute = () => {
    if (arc.length < 2) return null
    const size = map.getSize()
    const pts = arc.map(p => map.latLngToContainerPoint(p as L.LatLngTuple))
    const cum: number[] = [0]
    let total = 0
    for (let i = 1; i < pts.length; i++) {
      total += pts[i].distanceTo(pts[i - 1])
      cum.push(total)
    }
    if (total <= 0) return null
    const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
    const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
    const isIn = (p: L.Point) => {
      if (p.x < -40 || p.x > size.x + 40 || p.y < -40 || p.y > size.y + 40) return false
      if (p.distanceTo(fromPx) < buffer) return false
      if (p.distanceTo(toPx) < buffer) return false
      return true
    }
    let firstIdx = -1
    let lastIdx = -1
    for (let i = 0; i < pts.length; i++) {
      if (isIn(pts[i])) {
        if (firstIdx < 0) firstIdx = i
        lastIdx = i
      }
    }
    if (firstIdx < 0) {
      const target = total / 2
      let sIdx = 0
      while (sIdx < cum.length - 2 && cum[sIdx + 1] < target) sIdx++
      const span = cum[sIdx + 1] - cum[sIdx]
      const tm = span > 0 ? (target - cum[sIdx]) / span : 0
      const pA = pts[sIdx]
      const pB = pts[sIdx + 1]
      const mx = pA.x + (pB.x - pA.x) * tm
      const my = pA.y + (pB.y - pA.y) * tm
      const latlng = map.containerPointToLatLng([mx, my])
      let angle = Math.atan2(pB.y - pA.y, pB.x - pA.x) * 180 / Math.PI
      if (angle > 90) angle -= 180
      if (angle < -90) angle += 180
      return { point: [latlng.lat, latlng.lng] as [number, number], angle }
    }
    const bisectFraction = (a: L.Point, b: L.Point) => {
      let lo = 0, hi = 1
      for (let k = 0; k < 10; k++) {
        const mid = (lo + hi) / 2
        const mp = L.point(a.x + (b.x - a.x) * mid, a.y + (b.y - a.y) * mid)
        if (isIn(mp)) hi = mid
        else lo = mid
      }
      return (lo + hi) / 2
    }
    let lowCum = cum[firstIdx]
    if (firstIdx > 0) {
      const t = bisectFraction(pts[firstIdx - 1], pts[firstIdx])
      lowCum = cum[firstIdx - 1] + (cum[firstIdx] - cum[firstIdx - 1]) * t
    }
    let highCum = cum[lastIdx]
    if (lastIdx < pts.length - 1) {
      const t = bisectFraction(pts[lastIdx + 1], pts[lastIdx])
      highCum = cum[lastIdx] + (cum[lastIdx + 1] - cum[lastIdx]) * (1 - t)
    }
    const targetLen = (lowCum + highCum) / 2
    let segIdx = 0
    while (segIdx < cum.length - 2 && cum[segIdx + 1] < targetLen) segIdx++
    const segSpan = cum[segIdx + 1] - cum[segIdx]
    const t = segSpan > 0 ? (targetLen - cum[segIdx]) / segSpan : 0
    const pA = pts[segIdx]
    const pB = pts[segIdx + 1]
    const px = pA.x + (pB.x - pA.x) * t
    const py = pA.y + (pB.y - pA.y) * t
    const latlng = map.containerPointToLatLng([px, py])
    let angle = Math.atan2(pB.y - pA.y, pB.x - pA.x) * 180 / Math.PI
    if (angle > 90) angle -= 180
    if (angle < -90) angle += 180
    return { point: [latlng.lat, latlng.lng] as [number, number], angle }
  }
  const apply = () => {
    const pose = compute()
    const marker = markerRef.current
    if (!marker) return
    const el = marker.getElement() as HTMLElement | null
    if (!pose) {
      if (el) el.style.display = 'none'
      return
    }
    if (el) el.style.display = ''
    marker.setLatLng(pose.point as L.LatLngTuple)
    if (!innerRef.current && el) innerRef.current = el.querySelector('.trek-stats-inner') as HTMLElement | null
    if (innerRef.current) innerRef.current.style.transform = `rotate(${pose.angle}deg)`
  }
  useEffect(() => {
    const icon = L.divIcon({
      className: 'trek-endpoint-stats',
      html,
      iconSize: [width, height],
      iconAnchor: [width / 2, height / 2],
    })
    const marker = L.marker([0, 0], { icon, pane: ENDPOINT_PANE, interactive: false, keyboard: false })
    marker.addTo(map)
    markerRef.current = marker
    innerRef.current = null
    apply()
    return () => {
      marker.remove()
      markerRef.current = null
      innerRef.current = null
    }
  }, [map, html, width, height])
  useMapEvents({
    move: apply,
    zoom: apply,
    viewreset: apply,
    resize: apply,
  })
  return null
 }
 interface Props {
  reservations: Reservation[]
  showConnections: boolean
  showStats: boolean
  onEndpointClick?: (reservationId: number) => void
 }
 export default function ReservationOverlay({ reservations, showConnections, showStats, onEndpointClick }: Props) {
  useEndpointPane()
  const map = useMap()
  const [zoom, setZoom] = useState(() => map.getZoom())
  useMapEvents({
    zoomend: () => setZoom(map.getZoom()),
  })
  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
  const items = useMemo<TransportItem[]>(() => {
    const out: TransportItem[] = []
    for (const r of reservations) {
      if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
      const eps = r.endpoints || []
      const from = eps.find(e => e.role === 'from')
      const to = eps.find(e => e.role === 'to')
      if (!from || !to) continue
      const type = r.type as TransportType
      const isGeo = TYPE_META[type].geodesic
      const arcs = isGeo
        ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
        : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
      const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
      const primaryArc = arcs[primaryIdx] ?? []
      const fallback: [number, number] = primaryArc.length > 0
        ? (primaryArc[Math.floor(primaryArc.length / 2)] ?? [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2])
        : [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2]
      const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
      const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
      const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
      const subParts = [duration, distance].filter(Boolean) as string[]
      const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
      out.push({ res: r, from, to, type, arcs, primaryArc, fallback, mainLabel, subLabel })
    }
    return out
  }, [reservations])
  const visibleItems = useMemo(() => {
    return items.filter(item => {
      const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
      const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 150 : item.type === 'car' ? 80 : 200
      return fromPx.distanceTo(toPx) >= minPx
    })
  }, [items, zoom, map])
  const labelVisibleIds = useMemo(() => {
    const set = new Set<number>()
    for (const item of visibleItems) {
      const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
      const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : 400
      if (fromPx.distanceTo(toPx) >= minPx) set.add(item.res.id)
    }
    return set
  }, [visibleItems, zoom, map])
  if (!showConnections) return null
  return (
    <>
      {visibleItems.map(item => item.arcs.map((seg, segIdx) => (
        <Polyline
          key={`line-${item.res.id}-${segIdx}`}
          positions={seg}
          pathOptions={{
            color: TYPE_META[item.type].color,
            weight: 2.5,
            opacity: item.res.status === 'confirmed' ? 0.75 : 0.55,
            dashArray: item.res.status === 'confirmed' ? undefined : '6, 6',
          }}
        />
      )))}
      {visibleItems.flatMap(item => [
        <Marker
          key={`from-${item.res.id}`}
          position={[item.from.lat, item.from.lng]}
          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.from.code || cleanName(item.from.name)) : null)}
          pane={ENDPOINT_PANE}
          zIndexOffset={1000}
          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
        >
          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.from.name}</div>
            {item.res.title && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{item.res.title}</div>}
          </Tooltip>
        </Marker>,
        <Marker
          key={`to-${item.res.id}`}
          position={[item.to.lat, item.to.lng]}
          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.to.code || cleanName(item.to.name)) : null)}
          pane={ENDPOINT_PANE}
          zIndexOffset={1000}
          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
        >
          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.to.name}</div>
            {item.res.title && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{item.res.title}</div>}
          </Tooltip>
        </Marker>,
      ])}
      {showStats && visibleItems.map(item => item.type === 'flight' && (item.mainLabel || item.subLabel) && labelVisibleIds.has(item.res.id) && (
        <StatsLabel key={`stats-${item.res.id}`} item={item} />
      ))}
    </>
  )
 }
@@ -0,0 +1,155 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Plane, X } from 'lucide-react'
 import { airportsApi } from '../../api/client'
 import { useTranslation } from '../../i18n'
 export interface Airport {
  iata: string
  icao: string | null
  name: string
  city: string
  country: string
  lat: number
  lng: number
  tz: string
 }
 interface Props {
  value: Airport | null
  onChange: (airport: Airport | null) => void
  placeholder?: string
  style?: React.CSSProperties
 }
 function formatLabel(a: Airport) {
  return `${a.city || a.name} (${a.iata})`
 }
 export default function AirportSelect({ value, onChange, placeholder, style }: Props) {
  const { t, locale } = useTranslation()
  const countryName = useMemo(() => {
    try { return new Intl.DisplayNames([locale || 'en'], { type: 'region' }) } catch { return null }
  }, [locale])
  const displayCountry = (code: string) => {
    if (!code) return ''
    try { return countryName?.of(code) || code } catch { return code }
  }
  const [query, setQuery] = useState(value ? formatLabel(value) : '')
  const [open, setOpen] = useState(false)
  const [results, setResults] = useState<Airport[]>([])
  const [highlight, setHighlight] = useState(-1)
  const [loading, setLoading] = useState(false)
  const wrapRef = useRef<HTMLDivElement>(null)
  const abortRef = useRef<AbortController | null>(null)
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  useEffect(() => {
    setQuery(value ? formatLabel(value) : '')
  }, [value])
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
    }
    if (open) document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [open])
  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current)
    const trimmed = query.trim()
    if (trimmed.length < 2 || (value && trimmed === formatLabel(value))) {
      setResults([])
      return
    }
    debounceRef.current = setTimeout(async () => {
      abortRef.current?.abort()
      const controller = new AbortController()
      abortRef.current = controller
      setLoading(true)
      try {
        const data = await airportsApi.search(trimmed, controller.signal)
        setResults(Array.isArray(data) ? data : [])
        setHighlight(-1)
      } catch (err: any) {
        if (err?.name !== 'AbortError' && err?.name !== 'CanceledError') {
          setResults([])
        }
      } finally {
        setLoading(false)
      }
    }, 220)
    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
  }, [query, value])
  const pick = (a: Airport) => {
    onChange(a)
    setQuery(formatLabel(a))
    setOpen(false)
    setResults([])
  }
  const clear = () => {
    onChange(null)
    setQuery('')
    setResults([])
  }
  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (!open || results.length === 0) return
    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, results.length - 1)) }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)) }
    else if (e.key === 'Enter' && highlight >= 0) { e.preventDefault(); pick(results[highlight]) }
    else if (e.key === 'Escape') setOpen(false)
  }
  return (
    <div ref={wrapRef} style={{ position: 'relative', ...style }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', background: 'var(--bg-tertiary)', borderRadius: 10, border: '1px solid var(--border-primary)' }}>
        <Plane size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
        <input
          type="text"
          value={query}
          placeholder={placeholder ?? t('airport.searchPlaceholder')}
          onChange={(e) => { setQuery(e.target.value); setOpen(true); if (value) onChange(null) }}
          onFocus={() => setOpen(true)}
          onKeyDown={onKey}
          style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', color: 'var(--text-primary)', fontSize: 13 }}
        />
        {value && (
          <button type="button" onClick={clear} style={{ background: 'transparent', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }} aria-label="Clear">
            <X size={14} />
          </button>
        )}
      </div>
      {open && (loading || results.length > 0) && (
        <div style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.18)', maxHeight: 260, overflowY: 'auto', zIndex: 1000 }}>
          {loading && results.length === 0 && (
            <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('common.loading')}</div>
          )}
          {results.map((a, i) => (
            <button
              key={a.iata}
              type="button"
              onClick={() => pick(a)}
              onMouseEnter={() => setHighlight(i)}
              style={{
                display: 'flex', alignItems: 'center', gap: 8, width: '100%',
                padding: '8px 12px', border: 'none', cursor: 'pointer', textAlign: 'left',
                background: i === highlight ? 'var(--bg-hover)' : 'transparent',
                color: 'var(--text-primary)', fontFamily: 'inherit',
              }}
            >
              <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, monospace', fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', minWidth: 32 }}>{a.iata}</span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.city || a.name}</div>
                <div style={{ fontSize: 11, color: 'var(--text-faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.name}{a.country ? ` · ${displayCountry(a.country)}` : ''}</div>
              </span>
            </button>
          ))}
        </div>
      )}
    </div>
  )
 }
@@ -4,7 +4,7 @@ declare global { interface Window { __dragData: DragDataPayload | null } }
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import ReactDOM from 'react-dom'
-import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Check, Trash2, Info, MapPin, Star, Heart, Camera, Lightbulb, Flag, Bookmark, Train, Bus, Plane, Car, Ship, Coffee, ShoppingBag, AlertTriangle, FileDown, Lock, Hotel, Utensils, Users, Undo2, X } from 'lucide-react'
+import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Check, Trash2, Info, MapPin, Star, Heart, Camera, Lightbulb, Flag, Bookmark, Train, Bus, Plane, Car, Ship, Coffee, ShoppingBag, AlertTriangle, FileDown, Lock, Hotel, Utensils, Users, Undo2, X, Route as RouteIcon } from 'lucide-react'
 const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
 import { assignmentsApi, reservationsApi } from '../../api/client'
@@ -170,6 +170,10 @@ interface DayPlanSidebarProps {
  onEditPlace: (place: Place) => void
  onDeletePlace: (placeId: number) => void
  reservations?: Reservation[]
  visibleConnectionIds?: number[]
  onToggleConnection?: (reservationId: number) => void
  externalTransportDetail?: Reservation | null
  onExternalTransportDetailHandled?: () => void
  onAddReservation: () => void
  onNavigateToFiles?: () => void
  onAddPlace?: () => void
@@ -189,6 +193,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
  onReorder, onUpdateDayTitle, onRouteCalculated,
  onAssignToDay, onRemoveAssignment, onEditPlace, onDeletePlace,
  reservations = [],
  visibleConnectionIds = [],
  onToggleConnection,
  externalTransportDetail,
  onExternalTransportDetailHandled,
  onAddReservation,
  onAddPlace,
  onAddPlaceToDay,
@@ -234,6 +242,13 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
  const [hoveredId, setHoveredId] = useState(null)
  const [transportDetail, setTransportDetail] = useState(null)
  const [transportPosVersion, setTransportPosVersion] = useState(0)
  useEffect(() => {
    if (externalTransportDetail) {
      setTransportDetail(externalTransportDetail)
      onExternalTransportDetailHandled?.()
    }
  }, [externalTransportDetail, onExternalTransportDetailHandled])
  const [timeConfirm, setTimeConfirm] = useState<{
    dayId: number; fromId: number; time: string;
    // For drag & drop reorder
@@ -1570,6 +1585,29 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                </div>
                              )}
                            </div>
                            {onToggleConnection && (res.endpoints || []).length >= 2 && (() => {
                              const active = visibleConnectionIds.includes(res.id)
                              return (
                                <button
                                  type="button"
                                  onClick={e => { e.stopPropagation(); onToggleConnection(res.id) }}
                                  title={t(active ? 'map.hideConnections' : 'map.showConnections')}
                                  style={{
                                    flexShrink: 0, appearance: 'none',
                                    width: 26, height: 26, borderRadius: 6,
                                    display: 'grid', placeItems: 'center', cursor: 'pointer',
                                    border: 'none',
                                    background: active ? color : 'transparent',
                                    color: active ? '#fff' : 'var(--text-faint)',
                                    transition: 'all 0.12s',
                                  }}
                                  onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'var(--text-primary)' }}
                                  onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'var(--text-faint)' }}
                                >
                                  <RouteIcon size={13} />
                                </button>
                              )
                            })()}
                          </div>
                          {showDropLineAfter && <div style={{ height: 2, background: 'var(--text-primary)', borderRadius: 1, margin: '2px 8px' }} />}
                          </React.Fragment>
@@ -0,0 +1,140 @@
 import { useEffect, useRef, useState } from 'react'
 import { MapPin, X } from 'lucide-react'
 import { mapsApi } from '../../api/client'
 import { useTranslation } from '../../i18n'
 export interface LocationPoint {
  name: string
  lat: number
  lng: number
  address?: string | null
 }
 interface Props {
  value: LocationPoint | null
  onChange: (loc: LocationPoint | null) => void
  placeholder?: string
  style?: React.CSSProperties
 }
 export default function LocationSelect({ value, onChange, placeholder, style }: Props) {
  const { t, locale } = useTranslation()
  const [query, setQuery] = useState(value?.name || '')
  const [open, setOpen] = useState(false)
  const [results, setResults] = useState<any[]>([])
  const [highlight, setHighlight] = useState(-1)
  const [loading, setLoading] = useState(false)
  const wrapRef = useRef<HTMLDivElement>(null)
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  useEffect(() => {
    setQuery(value?.name || '')
  }, [value])
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
    }
    if (open) document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [open])
  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current)
    const trimmed = query.trim()
    if (trimmed.length < 3 || (value && trimmed === value.name)) {
      setResults([])
      return
    }
    debounceRef.current = setTimeout(async () => {
      setLoading(true)
      try {
        const data = await mapsApi.search(trimmed, locale)
        setResults(data.places || [])
        setHighlight(-1)
      } catch {
        setResults([])
      } finally {
        setLoading(false)
      }
    }, 320)
    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
  }, [query, value, locale])
  const pick = (r: any) => {
    const lat = Number(r.lat)
    const lng = Number(r.lng)
    if (!Number.isFinite(lat) || !Number.isFinite(lng)) return
    const loc: LocationPoint = { name: r.name || r.address || 'Location', lat, lng, address: r.address || null }
    onChange(loc)
    setQuery(loc.name)
    setOpen(false)
    setResults([])
  }
  const clear = () => {
    onChange(null)
    setQuery('')
    setResults([])
  }
  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (!open || results.length === 0) return
    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, results.length - 1)) }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)) }
    else if (e.key === 'Enter' && highlight >= 0) { e.preventDefault(); pick(results[highlight]) }
    else if (e.key === 'Escape') setOpen(false)
  }
  return (
    <div ref={wrapRef} style={{ position: 'relative', ...style }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', background: 'var(--bg-tertiary)', borderRadius: 10, border: '1px solid var(--border-primary)' }}>
        <MapPin size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
        <input
          type="text"
          value={query}
          placeholder={placeholder ?? t('reservations.searchLocation')}
          onChange={(e) => { setQuery(e.target.value); setOpen(true); if (value) onChange(null) }}
          onFocus={() => setOpen(true)}
          onKeyDown={onKey}
          style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', color: 'var(--text-primary)', fontSize: 13 }}
        />
        {value && (
          <button type="button" onClick={clear} style={{ background: 'transparent', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }} aria-label="Clear">
            <X size={14} />
          </button>
        )}
      </div>
      {open && (loading || results.length > 0) && (
        <div style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.18)', maxHeight: 260, overflowY: 'auto', zIndex: 1000 }}>
          {loading && results.length === 0 && (
            <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('common.loading')}</div>
          )}
          {results.map((r, i) => (
            <button
              key={`${r.osm_id || r.google_place_id || i}`}
              type="button"
              onClick={() => pick(r)}
              onMouseEnter={() => setHighlight(i)}
              style={{
                display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%',
                padding: '8px 12px', border: 'none', cursor: 'pointer', textAlign: 'left',
                background: i === highlight ? 'var(--bg-hover)' : 'transparent',
                color: 'var(--text-primary)', fontFamily: 'inherit',
              }}
            >
              <MapPin size={12} style={{ color: 'var(--text-faint)', marginTop: 2, flexShrink: 0 }} />
              <span style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.name || r.address}</div>
                {r.address && r.name !== r.address && (
                  <div style={{ fontSize: 11, color: 'var(--text-faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.address}</div>
                )}
              </span>
            </button>
          ))}
        </div>
      )}
    </div>
  )
 }
@@ -11,7 +11,58 @@ import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import CustomTimePicker from '../shared/CustomTimePicker'
 import { openFile } from '../../utils/fileDownload'
-import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation } from '../../types'
+import AirportSelect, { type Airport } from './AirportSelect'
 import LocationSelect, { type LocationPoint } from './LocationSelect'
 import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation, ReservationEndpoint } from '../../types'
 const TRANSPORT_TYPES = ['flight', 'train', 'cruise', 'car'] as const
 type TransportType = typeof TRANSPORT_TYPES[number]
 const isTransport = (t: string): t is TransportType => (TRANSPORT_TYPES as readonly string[]).includes(t)
 interface EndpointPick {
  airport?: Airport
  location?: LocationPoint
 }
 function endpointFromAirport(a: Airport, role: 'from' | 'to', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
  return {
    role, sequence,
    name: a.city ? `${a.city} (${a.iata})` : a.name,
    code: a.iata,
    lat: a.lat, lng: a.lng,
    timezone: a.tz,
    local_date: date,
    local_time: time,
  }
 }
 function endpointFromLocation(l: LocationPoint, role: 'from' | 'to', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
  return {
    role, sequence,
    name: l.name,
    code: null,
    lat: l.lat, lng: l.lng,
    timezone: null,
    local_date: date,
    local_time: time,
  }
 }
 function airportFromEndpoint(e: ReservationEndpoint | undefined): Airport | null {
  if (!e || !e.code) return null
  return {
    iata: e.code, icao: null,
    name: e.name, city: e.name.replace(/\s*\([A-Z]{3}\)\s*$/, ''),
    country: '',
    lat: e.lat, lng: e.lng,
    tz: e.timezone || '',
  }
 }
 function locationFromEndpoint(e: ReservationEndpoint | undefined): LocationPoint | null {
  if (!e) return null
  return { name: e.name, lat: e.lat, lng: e.lng, address: null }
 }
 const TYPE_OPTIONS = [
  { value: 'flight',     labelKey: 'reservations.type.flight',     Icon: Plane },
@@ -98,6 +149,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
  const [showFilePicker, setShowFilePicker] = useState(false)
  const [linkedFileIds, setLinkedFileIds] = useState<number[]>([])
  const [unlinkedFileIds, setUnlinkedFileIds] = useState<number[]>([])
  const [fromPick, setFromPick] = useState<EndpointPick>({})
  const [toPick, setToPick] = useState<EndpointPick>({})
  const assignmentOptions = useMemo(
    () => buildAssignmentOptions(days, assignments, t, locale),
@@ -148,6 +201,20 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
        price: meta.price || '',
        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
      })
      const eps = reservation.endpoints || []
      const from = eps.find(e => e.role === 'from')
      const to = eps.find(e => e.role === 'to')
      if (reservation.type === 'flight') {
        setFromPick({ airport: airportFromEndpoint(from) || undefined })
        setToPick({ airport: airportFromEndpoint(to) || undefined })
      } else if (isTransport(reservation.type)) {
        setFromPick({ location: locationFromEndpoint(from) || undefined })
        setToPick({ location: locationFromEndpoint(to) || undefined })
      } else {
        setFromPick({})
        setToPick({})
      }
    } else {
      setForm({
        title: '', type: 'other', status: 'pending',
@@ -160,6 +227,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
        meta_check_in_time: '', meta_check_in_end_time: '', meta_check_out_time: '',
      })
      setPendingFiles([])
      setFromPick({})
      setToPick({})
    }
  }, [reservation, isOpen, selectedDayId])
@@ -202,10 +271,14 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
      if (form.type === 'flight') {
        if (form.meta_airline) metadata.airline = form.meta_airline
        if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
-        if (form.meta_departure_airport) metadata.departure_airport = form.meta_departure_airport
+        if (fromPick.airport) {
-        if (form.meta_arrival_airport) metadata.arrival_airport = form.meta_arrival_airport
+          metadata.departure_airport = fromPick.airport.iata
-        if (form.meta_departure_timezone) metadata.departure_timezone = form.meta_departure_timezone
+          metadata.departure_timezone = fromPick.airport.tz
-        if (form.meta_arrival_timezone) metadata.arrival_timezone = form.meta_arrival_timezone
+        }
        if (toPick.airport) {
          metadata.arrival_airport = toPick.airport.iata
          metadata.arrival_timezone = toPick.airport.tz
        }
      } else if (form.type === 'hotel') {
        if (form.meta_check_in_time) metadata.check_in_time = form.meta_check_in_time
        if (form.meta_check_in_end_time) metadata.check_in_end_time = form.meta_check_in_end_time
@@ -224,6 +297,21 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
        if (form.price) metadata.price = form.price
        if (form.budget_category) metadata.budget_category = form.budget_category
      }
      const endpoints: ReturnType<typeof endpointFromAirport>[] = []
      if (isTransport(form.type)) {
        const startDate = (form.reservation_time || '').split('T')[0] || null
        const startTime = (form.reservation_time || '').split('T')[1]?.slice(0, 5) || null
        const endDate = form.end_date || null
        const endTime = form.reservation_end_time || null
        if (form.type === 'flight') {
          if (fromPick.airport) endpoints.push(endpointFromAirport(fromPick.airport, 'from', 0, startDate, startTime))
          if (toPick.airport) endpoints.push(endpointFromAirport(toPick.airport, 'to', 1, endDate, endTime))
        } else {
          if (fromPick.location) endpoints.push(endpointFromLocation(fromPick.location, 'from', 0, startDate, startTime))
          if (toPick.location) endpoints.push(endpointFromLocation(toPick.location, 'to', 1, endDate, endTime))
        }
      }
      const saveData: Record<string, any> = {
        title: form.title, type: form.type, status: form.status,
        reservation_time: form.type === 'hotel' ? null : form.reservation_time,
@@ -233,6 +321,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
        assignment_id: form.assignment_id || null,
        accommodation_id: form.type === 'hotel' ? (form.accommodation_id || null) : null,
        metadata: Object.keys(metadata).length > 0 ? metadata : null,
        endpoints: isTransport(form.type) ? endpoints : [],
        needs_review: false,
      }
      // Auto-create/update budget entry if price is set, or signal removal if cleared
      if (isBudgetEnabled) {
@@ -394,11 +484,12 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                }}
              />
            </div>
-            {form.type === 'flight' && (
+            {form.type === 'flight' && fromPick.airport && (
              <div style={{ flex: 1, minWidth: 0 }}>
                <label style={labelStyle}>{t('reservations.meta.departureTimezone')}</label>
-                <input type="text" value={form.meta_departure_timezone} onChange={e => set('meta_departure_timezone', e.target.value)}
+                <div style={{ ...inputStyle, padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
-                  placeholder="e.g. CET, UTC+1" style={inputStyle} />
+                  {fromPick.airport.tz}
                </div>
              </div>
            )}
          </div>
@@ -414,11 +505,12 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.arrivalTime') : form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}</label>
              <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
            </div>
-            {form.type === 'flight' && (
+            {form.type === 'flight' && toPick.airport && (
              <div style={{ flex: 1, minWidth: 0 }}>
                <label style={labelStyle}>{t('reservations.meta.arrivalTimezone')}</label>
-                <input type="text" value={form.meta_arrival_timezone} onChange={e => set('meta_arrival_timezone', e.target.value)}
+                <div style={{ ...inputStyle, padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
-                  placeholder="e.g. JST, UTC+9" style={inputStyle} />
+                  {toPick.airport.tz}
                </div>
              </div>
            )}
          </div>
@@ -456,9 +548,30 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
          </div>
        </div>
-        {/* Type-specific fields */}
+        {/* From / To endpoints for transport bookings */}
        {isTransport(form.type) && (
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label style={labelStyle}>{t('reservations.meta.from')}</label>
              {form.type === 'flight' ? (
                <AirportSelect value={fromPick.airport || null} onChange={a => setFromPick({ airport: a || undefined })} />
              ) : (
                <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} />
              )}
            </div>
            <div>
              <label style={labelStyle}>{t('reservations.meta.to')}</label>
              {form.type === 'flight' ? (
                <AirportSelect value={toPick.airport || null} onChange={a => setToPick({ airport: a || undefined })} />
              ) : (
                <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} />
              )}
            </div>
          </div>
        )}
        {form.type === 'flight' && (
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label style={labelStyle}>{t('reservations.meta.airline') || 'Airline'}</label>
              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
@@ -469,16 +582,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
                placeholder="LH 123" style={inputStyle} />
            </div>
            <div>
              <label style={labelStyle}>{t('reservations.meta.from') || 'From'}</label>
              <input type="text" value={form.meta_departure_airport} onChange={e => set('meta_departure_airport', e.target.value)}
                placeholder="FRA" style={inputStyle} />
            </div>
            <div>
              <label style={labelStyle}>{t('reservations.meta.to') || 'To'}</label>
              <input type="text" value={form.meta_arrival_airport} onChange={e => set('meta_arrival_airport', e.target.value)}
                placeholder="NRT" style={inputStyle} />
            </div>
          </div>
        )}
@@ -8,7 +8,7 @@ import { useTranslation } from '../../i18n'
 import {
  Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, MapPin,
  Calendar, Hash, CheckCircle2, Circle, Pencil, Trash2, Plus, ChevronDown, ChevronRight, Users,
-  ExternalLink, BookMarked, Lightbulb, Link2, Clock,
+  ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle,
 } from 'lucide-react'
 import { openFile } from '../../utils/fileDownload'
 import type { Reservation, Day, TripFile, AssignmentsMap } from '../../types'
@@ -142,6 +142,17 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
            <TypeIcon size={12} style={{ color: typeInfo.color }} />
            {t(typeInfo.labelKey)}
          </span>
          {r.needs_review ? (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              fontSize: 11, fontWeight: 600, color: '#b45309',
              padding: '3px 8px', borderRadius: 6,
              background: 'rgba(245,158,11,0.12)',
            }} title={t('reservations.needsReviewHint')}>
              <AlertCircle size={11} />
              {t('reservations.needsReview')}
            </span>
          ) : null}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          <span style={{
@@ -218,15 +229,35 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
          </div>
        )}
        {(() => {
          const eps = r.endpoints || []
          const from = eps.find(e => e.role === 'from')
          const to = eps.find(e => e.role === 'to')
          if (!from || !to) return null
          return (
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              padding: '8px 12px', borderRadius: 10,
              background: 'var(--bg-tertiary)',
              fontSize: 12.5, color: 'var(--text-primary)',
            }}>
              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{from.name}</span>
              <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />
              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{to.name}</span>
            </div>
          )
        })()}
        {/* Type-specific metadata */}
        {(() => {
          const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
          if (!meta || Object.keys(meta).length === 0) return null
          const hasEndpoints = (r.endpoints || []).some(e => e.role === 'from') && (r.endpoints || []).some(e => e.role === 'to')
          const cells: { label: string; value: string }[] = []
          if (meta.airline) cells.push({ label: t('reservations.meta.airline'), value: meta.airline })
          if (meta.flight_number) cells.push({ label: t('reservations.meta.flightNumber'), value: meta.flight_number })
-          if (meta.departure_airport) cells.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
+          if (!hasEndpoints && meta.departure_airport) cells.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
-          if (meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
+          if (!hasEndpoints && meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
          if (meta.train_number) cells.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
          if (meta.platform) cells.push({ label: t('reservations.meta.platform'), value: meta.platform })
          if (meta.seat) cells.push({ label: t('reservations.meta.seat'), value: meta.seat })
@@ -172,6 +172,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
        </div>
      </div>
      {/* Booking route labels */}
      <div>
        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.bookingLabels')}</label>
        <div className="flex gap-3">
          {[
            { value: true, label: t('settings.on') || 'On' },
            { value: false, label: t('settings.off') || 'Off' },
          ].map(opt => (
            <button
              key={String(opt.value)}
              onClick={async () => {
                try { await updateSetting('map_booking_labels', opt.value) }
                catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
              }}
              style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
                border: (settings.map_booking_labels !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
                background: (settings.map_booking_labels !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
                color: 'var(--text-primary)',
                transition: 'all 0.15s',
              }}
            >
              {opt.label}
            </button>
          ))}
        </div>
        <p className="text-xs mt-1" style={{ color: 'var(--text-faint)' }}>{t('settings.bookingLabelsHint')}</p>
      </div>
      {/* Blur Booking Codes */}
      <div>
        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.blurBookingCodes')}</label>
@@ -176,6 +176,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
  'settings.temperature': 'Temperatureinheit',
  'settings.timeFormat': 'Zeitformat',
  'settings.routeCalculation': 'Routenberechnung',
  'settings.bookingLabels': 'Orts-Labels auf Buchungsrouten',
  'settings.bookingLabelsHint': 'Zeigt Bahnhofs-/Flughafennamen auf der Karte. Wenn aus, wird nur das Icon angezeigt.',
  'settings.blurBookingCodes': 'Buchungscodes verbergen',
  'settings.notifications': 'Benachrichtigungen',
  'settings.notifyTripInvite': 'Trip-Einladungen',
@@ -1017,6 +1019,13 @@ const de: Record<string, string | { name: string; category: string }[]> = {
  'reservations.meta.flightNumber': 'Flugnr.',
  'reservations.meta.from': 'Von',
  'reservations.meta.to': 'Nach',
  'reservations.needsReview': 'Prüfen',
  'reservations.needsReviewHint': 'Flughafen konnte nicht automatisch erkannt werden — bitte Ort bestätigen.',
  'reservations.searchLocation': 'Bahnhof, Hafen, Adresse suchen…',
  'airport.searchPlaceholder': 'Flughafencode oder Stadt (z. B. FRA)',
  'map.connections': 'Verbindungen',
  'map.showConnections': 'Buchungsrouten anzeigen',
  'map.hideConnections': 'Buchungsrouten ausblenden',
  'reservations.meta.trainNumber': 'Zugnr.',
  'reservations.meta.platform': 'Gleis',
  'reservations.meta.seat': 'Sitzplatz',
@@ -176,6 +176,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
  'settings.temperature': 'Temperature Unit',
  'settings.timeFormat': 'Time Format',
  'settings.routeCalculation': 'Route Calculation',
  'settings.bookingLabels': 'Booking route labels',
  'settings.bookingLabelsHint': 'Show station / airport names on the map. When off, only the icon is shown.',
  'settings.blurBookingCodes': 'Blur Booking Codes',
  'settings.notifications': 'Notifications',
  'settings.notifyTripInvite': 'Trip invitations',
@@ -1070,6 +1072,13 @@ const en: Record<string, string | { name: string; category: string }[]> = {
  'reservations.meta.flightNumber': 'Flight No.',
  'reservations.meta.from': 'From',
  'reservations.meta.to': 'To',
  'reservations.needsReview': 'Review',
  'reservations.needsReviewHint': 'Airport could not be matched automatically — please confirm the location.',
  'reservations.searchLocation': 'Search station, port, address…',
  'airport.searchPlaceholder': 'Airport code or city (e.g. FRA)',
  'map.connections': 'Connections',
  'map.showConnections': 'Show booking routes',
  'map.hideConnections': 'Hide booking routes',
  'reservations.meta.trainNumber': 'Train No.',
  'reservations.meta.platform': 'Platform',
  'reservations.meta.seat': 'Seat',
@@ -168,6 +168,23 @@ export default function TripPlannerPage(): React.ReactElement | null {
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState<'left' | 'right' | null>(null)
  const [deletePlaceId, setDeletePlaceId] = useState<number | null>(null)
  const connectionsStorageKey = tripId ? `trek:visible-connections:${tripId}` : null
  const [visibleConnections, setVisibleConnections] = useState<number[]>(() => {
    if (typeof window === 'undefined' || !connectionsStorageKey) return []
    try {
      const stored = window.localStorage.getItem(connectionsStorageKey)
      return stored ? JSON.parse(stored) as number[] : []
    } catch { return [] }
  })
  useEffect(() => {
    if (typeof window === 'undefined' || !connectionsStorageKey) return
    window.localStorage.setItem(connectionsStorageKey, JSON.stringify(visibleConnections))
  }, [connectionsStorageKey, visibleConnections])
  const toggleConnection = useCallback((id: number) => {
    setVisibleConnections(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
  }, [])
  const [mapTransportDetail, setMapTransportDetail] = useState<Reservation | null>(null)
  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
  useEffect(() => {
    const mq = window.matchMedia('(max-width: 767px)')
@@ -626,6 +643,13 @@ export default function TripPlannerPage(): React.ReactElement | null {
              rightWidth={rightCollapsed ? 0 : rightWidth}
              hasInspector={!!selectedPlace}
              hasDayDetail={!!showDayDetail && !selectedPlace}
              reservations={reservations}
              showReservationStats={settings.route_calculation !== false}
              visibleConnectionIds={visibleConnections}
              onReservationClick={(rid) => {
                const r = reservations.find(x => x.id === rid)
                if (r) setMapTransportDetail(r)
              }}
            />
@@ -672,6 +696,10 @@ export default function TripPlannerPage(): React.ReactElement | null {
                  onAssignToDay={handleAssignToDay}
                  onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText, walkingText: r.walkingText, drivingText: r.drivingText }) } else { setRoute(null); setRouteInfo(null) } }}
                  reservations={reservations}
                  visibleConnectionIds={visibleConnections}
                  onToggleConnection={toggleConnection}
                  externalTransportDetail={mapTransportDetail}
                  onExternalTransportDetailHandled={() => setMapTransportDetail(null)}
                  onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true) }}
                  onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }}
                  onRemoveAssignment={handleRemoveAssignment}
@@ -137,6 +137,20 @@ export interface BudgetMember {
  paid: boolean
 }
 export interface ReservationEndpoint {
  id?: number
  reservation_id?: number
  role: 'from' | 'to' | 'stop'
  sequence: number
  name: string
  code: string | null
  lat: number
  lng: number
  timezone: string | null
  local_time: string | null
  local_date: string | null
 }
 export interface Reservation {
  id: number
  trip_id: number
@@ -158,6 +172,8 @@ export interface Reservation {
  accommodation_id?: number | null
  day_plan_position?: number | null
  metadata?: Record<string, string> | string | null
  needs_review?: number
  endpoints?: ReservationEndpoint[]
  created_at: string
 }
@@ -54,6 +54,7 @@
        "@vitest/coverage-v8": "^3.2.4",
        "nodemon": "^3.1.0",
        "supertest": "^7.2.2",
        "tz-lookup": "^6.1.25",
        "vitest": "^3.2.4"
      }
    },
@@ -1189,9 +1190,6 @@
        "arm"
      ],
      "dev": true,
      "libc": [
        "glibc"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1206,9 +1204,6 @@
        "arm"
      ],
      "dev": true,
      "libc": [
        "musl"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1223,9 +1218,6 @@
        "arm64"
      ],
      "dev": true,
      "libc": [
        "glibc"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1240,9 +1232,6 @@
        "arm64"
      ],
      "dev": true,
      "libc": [
        "musl"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1257,9 +1246,6 @@
        "loong64"
      ],
      "dev": true,
      "libc": [
        "glibc"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1274,9 +1260,6 @@
        "loong64"
      ],
      "dev": true,
      "libc": [
        "musl"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1291,9 +1274,6 @@
        "ppc64"
      ],
      "dev": true,
      "libc": [
        "glibc"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1308,9 +1288,6 @@
        "ppc64"
      ],
      "dev": true,
      "libc": [
        "musl"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1325,9 +1302,6 @@
        "riscv64"
      ],
      "dev": true,
      "libc": [
        "glibc"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1342,9 +1316,6 @@
        "riscv64"
      ],
      "dev": true,
      "libc": [
        "musl"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1359,9 +1330,6 @@
        "s390x"
      ],
      "dev": true,
      "libc": [
        "glibc"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1376,9 +1344,6 @@
        "x64"
      ],
      "dev": true,
      "libc": [
        "glibc"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1393,9 +1358,6 @@
        "x64"
      ],
      "dev": true,
      "libc": [
        "musl"
      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -5867,6 +5829,13 @@
        "node": ">=14.17"
      }
    },
    "node_modules/tz-lookup": {
      "version": "6.1.25",
      "resolved": "https://registry.npmjs.org/tz-lookup/-/tz-lookup-6.1.25.tgz",
      "integrity": "sha512-fFewT9o1uDzsW1QnUU1ValqaihFnwiUiiHr1S79/fxOzKXYYvX+EHeRnpvQJ9B3Qg67wPXT6QF2Esc4pFOrvLg==",
      "dev": true,
      "license": "CC0-1.0"
    },
    "node_modules/undefsafe": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -63,6 +63,7 @@
    "@vitest/coverage-v8": "^3.2.4",
    "nodemon": "^3.1.0",
    "supertest": "^7.2.2",
    "tz-lookup": "^6.1.25",
    "vitest": "^3.2.4"
  }
 }
@@ -0,0 +1,108 @@
 #!/usr/bin/env node
 // Build server/data/airports.json from OurAirports (davidmegginson.github.io/ourairports-data).
 // License: Public Domain. Keeps large/medium airports with an IATA code; timezone derived from coords via tz-lookup.
 import fs from 'node:fs'
 import path from 'node:path'
 import https from 'node:https'
 import { fileURLToPath } from 'node:url'
 import tzLookup from 'tz-lookup'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const OUT = path.join(__dirname, '..', 'data', 'airports.json')
 const SRC = 'https://davidmegginson.github.io/ourairports-data/airports.csv'
 function fetchText(url) {
  return new Promise((resolve, reject) => {
    https.get(url, (res) => {
      if (res.statusCode !== 200) return reject(new Error(`HTTP ${res.statusCode}`))
      let data = ''
      res.setEncoding('utf8')
      res.on('data', chunk => { data += chunk })
      res.on('end', () => resolve(data))
    }).on('error', reject)
  })
 }
 function parseCsv(text) {
  const rows = []
  let row = []
  let cur = ''
  let inQuotes = false
  for (let i = 0; i < text.length; i++) {
    const ch = text[i]
    if (inQuotes) {
      if (ch === '"') {
        if (text[i + 1] === '"') { cur += '"'; i++ } else { inQuotes = false }
      } else {
        cur += ch
      }
    } else {
      if (ch === '"') inQuotes = true
      else if (ch === ',') { row.push(cur); cur = '' }
      else if (ch === '\n') { row.push(cur); rows.push(row); row = []; cur = '' }
      else if (ch === '\r') { /* skip */ }
      else cur += ch
    }
  }
  if (cur.length > 0 || row.length > 0) { row.push(cur); rows.push(row) }
  return rows
 }
 const raw = await fetchText(SRC)
 const rows = parseCsv(raw)
 const header = rows[0]
 const idx = (name) => header.indexOf(name)
 const TYPE = idx('type')
 const NAME = idx('name')
 const LAT = idx('latitude_deg')
 const LNG = idx('longitude_deg')
 const COUNTRY = idx('iso_country')
 const MUNICIPALITY = idx('municipality')
 const SERVICE = idx('scheduled_service')
 const ICAO = idx('icao_code')
 const IATA = idx('iata_code')
 const KEEP = new Set(['large_airport', 'medium_airport'])
 const airports = []
 let skippedNoTz = 0
 for (let i = 1; i < rows.length; i++) {
  const r = rows[i]
  if (!r || r.length < header.length) continue
  if (!KEEP.has(r[TYPE])) continue
  const iata = r[IATA]?.trim().toUpperCase()
  if (!iata || iata.length !== 3) continue
  if (r[SERVICE] !== 'yes') continue
  const lat = Number(r[LAT])
  const lng = Number(r[LNG])
  if (!Number.isFinite(lat) || !Number.isFinite(lng)) continue
  let tz = null
  try { tz = tzLookup(lat, lng) } catch { skippedNoTz++; continue }
  if (!tz) { skippedNoTz++; continue }
  airports.push({
    iata,
    icao: r[ICAO]?.trim().toUpperCase() || null,
    name: r[NAME],
    city: r[MUNICIPALITY] || '',
    country: r[COUNTRY] || '',
    lat: Math.round(lat * 1e6) / 1e6,
    lng: Math.round(lng * 1e6) / 1e6,
    tz,
  })
 }
 const seen = new Map()
 for (const a of airports) {
  const existing = seen.get(a.iata)
  if (!existing) { seen.set(a.iata, a); continue }
  if (existing.icao && !a.icao) continue
  if (!existing.icao && a.icao) seen.set(a.iata, a)
 }
 const unique = Array.from(seen.values()).sort((a, b) => a.iata.localeCompare(b.iata))
 fs.writeFileSync(OUT, JSON.stringify(unique))
 const size = fs.statSync(OUT).size
 console.log(`Wrote ${unique.length} airports to ${OUT} (${(size / 1024).toFixed(1)} KB); skipped ${skippedNoTz} without timezone`)
@@ -23,6 +23,7 @@ import tagsRoutes from './routes/tags';
 import categoriesRoutes from './routes/categories';
 import adminRoutes from './routes/admin';
 import mapsRoutes from './routes/maps';
 import airportsRoutes from './routes/airports';
 import filesRoutes from './routes/files';
 import reservationsRoutes from './routes/reservations';
 import dayNotesRoutes from './routes/dayNotes';
@@ -278,6 +279,7 @@ export function createApp(): express.Application {
  app.use('/api/integrations/memories', memoriesRoutes);
  app.use('/api/photos', photoRoutes);
  app.use('/api/maps', mapsRoutes);
  app.use('/api/airports', airportsRoutes);
  app.use('/api/weather', weatherRoutes);
  app.use('/api/settings', settingsRoutes);
  app.use('/api/system-notices', systemNoticesRoutes);
@@ -128,4 +128,11 @@ function isOwner(tripId: number | string, userId: number): boolean {
  return !!db.prepare('SELECT id FROM trips WHERE id = ? AND user_id = ?').get(tripId, userId);
 }
 try {
  const { backfillFlightEndpoints } = require('../services/airportService');
  backfillFlightEndpoints();
 } catch (err) {
  console.error('[DB] Flight endpoint backfill failed:', err);
 }
 export { db, closeDb, reinitialize, getPlaceWithTags, canAccessTrip, isOwner };
@@ -1634,6 +1634,27 @@ function runMigrations(db: Database.Database): void {
      try { db.exec('ALTER TABLE trip_album_links ADD COLUMN passphrase TEXT DEFAULT NULL'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
      try { db.exec('ALTER TABLE trek_photos ADD COLUMN passphrase TEXT DEFAULT NULL'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
    },
    // Migration 105: Reservation endpoints (from/to points for flights, trains, ferries, car rentals) — #384 + #587
    () => {
      db.exec(`
        CREATE TABLE IF NOT EXISTS reservation_endpoints (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          reservation_id INTEGER NOT NULL REFERENCES reservations(id) ON DELETE CASCADE,
          role TEXT NOT NULL,
          sequence INTEGER NOT NULL DEFAULT 0,
          name TEXT NOT NULL,
          code TEXT,
          lat REAL NOT NULL,
          lng REAL NOT NULL,
          timezone TEXT,
          local_time TEXT,
          local_date TEXT,
          created_at DATETIME DEFAULT CURRENT_TIMESTAMP
        )
      `);
      db.exec('CREATE INDEX IF NOT EXISTS idx_reservation_endpoints_reservation_id ON reservation_endpoints(reservation_id)');
      try { db.exec('ALTER TABLE reservations ADD COLUMN needs_review INTEGER NOT NULL DEFAULT 0'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
    },
  ];
  if (currentVersion < migrations.length) {
@@ -0,0 +1,19 @@
 import express, { Request, Response } from 'express';
 import { authenticate } from '../middleware/auth';
 import { searchAirports, findByIata } from '../services/airportService';
 const router = express.Router();
 router.get('/search', authenticate, (req: Request, res: Response) => {
  const q = typeof req.query.q === 'string' ? req.query.q : '';
  if (!q) return res.json([]);
  res.json(searchAirports(q));
 });
 router.get('/:iata', authenticate, (req: Request, res: Response) => {
  const airport = findByIata(req.params.iata);
  if (!airport) return res.status(404).json({ error: 'Airport not found' });
  res.json(airport);
 });
 export default router;
@@ -31,7 +31,7 @@ router.get('/', authenticate, (req: Request, res: Response) => {
 router.post('/', authenticate, (req: Request, res: Response) => {
  const authReq = req as AuthRequest;
  const { tripId } = req.params;
-  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation, create_budget_entry } = req.body;
+  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation, create_budget_entry, endpoints, needs_review } = req.body;
  const trip = verifyTripAccess(tripId, authReq.user.id);
  if (!trip) return res.status(404).json({ error: 'Trip not found' });
@@ -44,7 +44,8 @@ router.post('/', authenticate, (req: Request, res: Response) => {
  const { reservation, accommodationCreated } = createReservation(tripId, {
    title, reservation_time, reservation_end_time, location,
    confirmation_number, notes, day_id, place_id, assignment_id,
-    status, type, accommodation_id, metadata, create_accommodation
+    status, type, accommodation_id, metadata, create_accommodation,
    endpoints, needs_review
  });
  if (accommodationCreated) {
@@ -101,7 +102,7 @@ router.put('/positions', authenticate, (req: Request, res: Response) => {
 router.put('/:id', authenticate, (req: Request, res: Response) => {
  const authReq = req as AuthRequest;
  const { tripId, id } = req.params;
-  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation, create_budget_entry } = req.body;
+  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation, create_budget_entry, endpoints, needs_review } = req.body;
  const trip = verifyTripAccess(tripId, authReq.user.id);
  if (!trip) return res.status(404).json({ error: 'Trip not found' });
@@ -115,7 +116,8 @@ router.put('/:id', authenticate, (req: Request, res: Response) => {
  const { reservation, accommodationChanged } = updateReservation(id, tripId, {
    title, reservation_time, reservation_end_time, location,
    confirmation_number, notes, day_id, place_id, assignment_id,
-    status, type, accommodation_id, metadata, create_accommodation
+    status, type, accommodation_id, metadata, create_accommodation,
    endpoints, needs_review
  }, current);
  if (accommodationChanged) {
@@ -0,0 +1,109 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { db } from '../db/database';
 export interface Airport {
  iata: string;
  icao: string | null;
  name: string;
  city: string;
  country: string;
  lat: number;
  lng: number;
  tz: string;
 }
 let cache: Airport[] | null = null;
 let byIata: Map<string, Airport> | null = null;
 function load(): Airport[] {
  if (cache) return cache;
  const file = path.join(__dirname, '..', '..', 'data', 'airports.json');
  if (!fs.existsSync(file)) {
    console.warn('[airports] airports.json missing — run `node scripts/build-airports.mjs`');
    cache = [];
    byIata = new Map();
    return cache;
  }
  const raw = fs.readFileSync(file, 'utf8');
  cache = JSON.parse(raw) as Airport[];
  byIata = new Map(cache.map(a => [a.iata, a]));
  return cache;
 }
 export function findByIata(code: string): Airport | null {
  load();
  return byIata!.get(code.toUpperCase()) ?? null;
 }
 export function searchAirports(query: string, limit = 12): Airport[] {
  const all = load();
  const q = query.trim().toLowerCase();
  if (!q) return [];
  const upper = q.toUpperCase();
  if (q.length === 3) {
    const exact = byIata!.get(upper);
    if (exact) return [exact];
  }
  const matches: Array<{ a: Airport; score: number }> = [];
  for (const a of all) {
    let score = 0;
    if (a.iata === upper) score = 100;
    else if (a.icao === upper) score = 90;
    else if (a.iata.startsWith(upper)) score = 70;
    else if (a.city.toLowerCase().startsWith(q)) score = 60;
    else if (a.name.toLowerCase().startsWith(q)) score = 50;
    else if (a.city.toLowerCase().includes(q)) score = 30;
    else if (a.name.toLowerCase().includes(q)) score = 20;
    if (score > 0) matches.push({ a, score });
  }
  matches.sort((x, y) => y.score - x.score || x.a.iata.localeCompare(y.a.iata));
  return matches.slice(0, limit).map(m => m.a);
 }
 export function backfillFlightEndpoints(): void {
  const pending = db.prepare(`
    SELECT r.id, r.metadata, r.reservation_time, r.reservation_end_time
    FROM reservations r
    WHERE r.type = 'flight'
      AND NOT EXISTS (SELECT 1 FROM reservation_endpoints e WHERE e.reservation_id = r.id)
  `).all() as { id: number; metadata: string | null; reservation_time: string | null; reservation_end_time: string | null }[];
  if (pending.length === 0) return;
  load();
  const insert = db.prepare(`
    INSERT INTO reservation_endpoints (reservation_id, role, sequence, name, code, lat, lng, timezone, local_time, local_date)
    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
  `);
  const markReview = db.prepare('UPDATE reservations SET needs_review = 1 WHERE id = ?');
  let filled = 0;
  let flagged = 0;
  for (const r of pending) {
    if (!r.metadata) { markReview.run(r.id); flagged++; continue; }
    let meta: any;
    try { meta = JSON.parse(r.metadata); } catch { markReview.run(r.id); flagged++; continue; }
    const dep = meta.departure_airport ? findByIata(String(meta.departure_airport).slice(0, 3)) : null;
    const arr = meta.arrival_airport ? findByIata(String(meta.arrival_airport).slice(0, 3)) : null;
    if (!dep || !arr) { markReview.run(r.id); flagged++; continue; }
    const split = (iso: string | null) => {
      if (!iso) return { date: null as string | null, time: null as string | null };
      const [date, time] = iso.split('T');
      return { date: date || null, time: time ? time.slice(0, 5) : null };
    };
    const depParts = split(r.reservation_time);
    const arrParts = split(r.reservation_end_time);
    insert.run(r.id, 'from', 0, dep.city ? `${dep.city} (${dep.iata})` : dep.name, dep.iata, dep.lat, dep.lng, dep.tz, depParts.time, depParts.date);
    insert.run(r.id, 'to', 1, arr.city ? `${arr.city} (${arr.iata})` : arr.name, arr.iata, arr.lat, arr.lng, arr.tz, arrParts.time, arrParts.date);
    filled++;
  }
  console.log(`[airports] Backfill: ${filled} filled, ${flagged} flagged for review`);
 }
@@ -1,10 +1,59 @@
 import { db, canAccessTrip } from '../db/database';
 import { Reservation } from '../types';
 export interface ReservationEndpoint {
  id?: number;
  reservation_id?: number;
  role: 'from' | 'to' | 'stop';
  sequence: number;
  name: string;
  code: string | null;
  lat: number;
  lng: number;
  timezone: string | null;
  local_time: string | null;
  local_date: string | null;
 }
 type EndpointInput = Omit<ReservationEndpoint, 'id' | 'reservation_id' | 'sequence'> & { sequence?: number };
 export function verifyTripAccess(tripId: string | number, userId: number) {
  return canAccessTrip(tripId, userId);
 }
 function loadEndpointsByTrip(tripId: string | number): Map<number, ReservationEndpoint[]> {
  const rows = db.prepare(`
    SELECT e.* FROM reservation_endpoints e
    JOIN reservations r ON e.reservation_id = r.id
    WHERE r.trip_id = ?
    ORDER BY e.reservation_id, e.sequence
  `).all(tripId) as ReservationEndpoint[];
  const map = new Map<number, ReservationEndpoint[]>();
  for (const r of rows) {
    const list = map.get(r.reservation_id!) ?? [];
    list.push(r);
    map.set(r.reservation_id!, list);
  }
  return map;
 }
 function loadEndpoints(reservationId: number): ReservationEndpoint[] {
  return db.prepare(
    'SELECT * FROM reservation_endpoints WHERE reservation_id = ? ORDER BY sequence'
  ).all(reservationId) as ReservationEndpoint[];
 }
 const saveEndpoints = db.transaction((reservationId: number, endpoints: EndpointInput[]) => {
  db.prepare('DELETE FROM reservation_endpoints WHERE reservation_id = ?').run(reservationId);
  const insert = db.prepare(`
    INSERT INTO reservation_endpoints (reservation_id, role, sequence, name, code, lat, lng, timezone, local_time, local_date)
    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
  `);
  endpoints.forEach((e, i) => {
    insert.run(reservationId, e.role, e.sequence ?? i, e.name, e.code ?? null, e.lat, e.lng, e.timezone ?? null, e.local_time ?? null, e.local_date ?? null);
  });
 });
 export function listReservations(tripId: string | number) {
  const reservations = db.prepare(`
    SELECT r.*, d.day_number, p.name as place_name, r.assignment_id,
@@ -18,7 +67,6 @@ export function listReservations(tripId: string | number) {
    ORDER BY r.reservation_time ASC, r.created_at ASC
  `).all(tripId) as any[];
  // Attach per-day positions for multi-day reservations
  const dayPositions = db.prepare(`
    SELECT rdp.reservation_id, rdp.day_id, rdp.position
    FROM reservation_day_positions rdp
@@ -32,15 +80,18 @@ export function listReservations(tripId: string | number) {
    posMap.get(dp.reservation_id)![dp.day_id] = dp.position;
  }
  const endpointsMap = loadEndpointsByTrip(tripId);
  for (const r of reservations) {
    r.day_positions = posMap.get(r.id) || null;
    r.endpoints = endpointsMap.get(r.id) || [];
  }
  return reservations;
 }
 export function getReservationWithJoins(id: string | number) {
-  return db.prepare(`
+  const row = db.prepare(`
    SELECT r.*, d.day_number, p.name as place_name, r.assignment_id,
      ap.place_id as accommodation_place_id, acc_p.name as accommodation_name
    FROM reservations r
@@ -49,7 +100,10 @@ export function getReservationWithJoins(id: string | number) {
    LEFT JOIN day_accommodations ap ON r.accommodation_id = ap.id
    LEFT JOIN places acc_p ON ap.place_id = acc_p.id
    WHERE r.id = ?
-  `).get(id);
+  `).get(id) as any;
  if (!row) return undefined;
  row.endpoints = loadEndpoints(row.id);
  return row;
 }
 interface CreateAccommodation {
@@ -76,13 +130,16 @@ interface CreateReservationData {
  accommodation_id?: number;
  metadata?: any;
  create_accommodation?: CreateAccommodation;
  endpoints?: EndpointInput[];
  needs_review?: boolean;
 }
 export function createReservation(tripId: string | number, data: CreateReservationData): { reservation: any; accommodationCreated: boolean } {
  const {
    title, reservation_time, reservation_end_time, location,
    confirmation_number, notes, day_id, place_id, assignment_id,
-    status, type, accommodation_id, metadata, create_accommodation
+    status, type, accommodation_id, metadata, create_accommodation,
    endpoints, needs_review
  } = data;
  let accommodationCreated = false;
@@ -101,8 +158,8 @@ export function createReservation(tripId: string | number, data: CreateReservati
  }
  const result = db.prepare(`
-    INSERT INTO reservations (trip_id, day_id, place_id, assignment_id, title, reservation_time, reservation_end_time, location, confirmation_number, notes, status, type, accommodation_id, metadata)
+    INSERT INTO reservations (trip_id, day_id, place_id, assignment_id, title, reservation_time, reservation_end_time, location, confirmation_number, notes, status, type, accommodation_id, metadata, needs_review)
-    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
  `).run(
    tripId,
    day_id || null,
@@ -117,9 +174,14 @@ export function createReservation(tripId: string | number, data: CreateReservati
    status || 'pending',
    type || 'other',
    resolvedAccommodationId,
-    metadata ? JSON.stringify(metadata) : null
+    metadata ? JSON.stringify(metadata) : null,
    needs_review ? 1 : 0
  );
  if (endpoints && endpoints.length > 0) {
    saveEndpoints(Number(result.lastInsertRowid), endpoints);
  }
  // Sync check-in/out to accommodation if linked
  if (accommodation_id && metadata) {
    const meta = typeof metadata === 'string' ? JSON.parse(metadata) : metadata;
@@ -187,13 +249,16 @@ interface UpdateReservationData {
  accommodation_id?: number;
  metadata?: any;
  create_accommodation?: CreateAccommodation;
  endpoints?: EndpointInput[];
  needs_review?: boolean;
 }
 export function updateReservation(id: string | number, tripId: string | number, data: UpdateReservationData, current: Reservation): { reservation: any; accommodationChanged: boolean } {
  const {
    title, reservation_time, reservation_end_time, location,
    confirmation_number, notes, day_id, place_id, assignment_id,
-    status, type, accommodation_id, metadata, create_accommodation
+    status, type, accommodation_id, metadata, create_accommodation,
    endpoints, needs_review
  } = data;
  let accommodationChanged = false;
@@ -234,7 +299,8 @@ export function updateReservation(id: string | number, tripId: string | number,
      status = COALESCE(?, status),
      type = COALESCE(?, type),
      accommodation_id = ?,
-      metadata = ?
+      metadata = ?,
      needs_review = COALESCE(?, needs_review)
    WHERE id = ?
  `).run(
    title || null,
@@ -250,9 +316,14 @@ export function updateReservation(id: string | number, tripId: string | number,
    type || null,
    resolvedAccId,
    metadata !== undefined ? (metadata ? JSON.stringify(metadata) : null) : current.metadata,
    needs_review === undefined ? null : (needs_review ? 1 : 0),
    id
  );
  if (endpoints !== undefined) {
    saveEndpoints(Number(id), endpoints);
  }
  // Sync check-in/out to accommodation if linked
  const resolvedMeta = metadata !== undefined ? metadata : (current.metadata ? JSON.parse(current.metadata as string) : null);
  if (resolvedAccId && resolvedMeta) {
@@ -139,6 +139,20 @@ export interface BudgetItemMember {
  budget_item_id?: number;
 }
 export interface ReservationEndpoint {
  id: number;
  reservation_id: number;
  role: 'from' | 'to' | 'stop';
  sequence: number;
  name: string;
  code: string | null;
  lat: number;
  lng: number;
  timezone: string | null;
  local_time: string | null;
  local_date: string | null;
 }
 export interface Reservation {
  id: number;
  trip_id: number;
@@ -155,6 +169,8 @@ export interface Reservation {
  type: string;
  accommodation_id?: number | null;
  metadata?: string | null;
  needs_review?: number;
  endpoints?: ReservationEndpoint[];
  created_at?: string;
  day_number?: number;
  place_name?: string;