feat(reservations): native booking-confirmation import via KDE KItinerary (#1102)

* feat(reservations): native booking-confirmation import via KDE KItinerary Adds a two-step preview → confirm flow for importing booking emails, PDFs, PKPass and HTML confirmations. The server invokes the KDE kitinerary-extractor binary, maps JSON-LD schema.org output to TREK reservation shapes, and persists via the existing createReservation pipeline (accommodations, budget, places, WebSocket broadcasts). - NestJS BookingImportModule: preview + confirm endpoints under /api/trips/:tripId/reservations/import/booking{,/confirm} - KitineraryExtractorService: spawns the binary, filters stderr noise, handles QDateTime (@value) timezone-aware datetimes - kitinerary-mapper: FlightReservation, TrainReservation, BusReservation, BoatReservation, LodgingReservation, FoodEstablishmentReservation, RentalCarReservation, EventReservation → typed preview items - BookingImportService: auto-creates place rows; geocodes venues without coordinates via Nominatim (name+address → address → name fallback); resolves day IDs for accommodation linking - BookingImportModal: drag-and-drop multi-file upload, preview cards with type icons, per-item exclude toggle, confirm step - Shared Zod contracts: BookingImportPreviewItem, PreviewResponse, ConfirmRequest, ConfirmResponse — consumed by controller, service, API client and modal - Dockerfile: node:24-trixie-slim runtime; amd64 downloads KDE static binary + locales; arm64 installs libkitinerary-bin + symlinks to fixed path; ENV KITINERARY_EXTRACTOR_PATH set for both arches - /api/health/features exposes { bookingImport: boolean } so the UI hides the Import button when the binary is absent - i18n keys (English), wiki docs, API.md, README one-liner * i18n: add booking import translations for all 19 non-English locales Adds 17 reservations.import.* keys and undo.importBooking to ar, br, cs, de, es, fr, gr, hu, id, it, ja, ko, nl, pl, ru, tr, uk, zh, zh-TW. * chore: enforce i18n parity * docs(wiki): add KItinerary local setup instructions to dev environment guide
2026-06-19 21:31:46 +00:00 · 2026-06-04 20:40:57 +02:00
parent abe1c549bd
commit 6ef3c7ae6b
64 changed files with 1851 additions and 31 deletions
@@ -0,0 +1,382 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { useState, useRef, useEffect } from 'react'
+import { Upload, Plane, Train, Hotel, UtensilsCrossed, Car, Anchor, Calendar, ArrowLeft, X } from 'lucide-react'
+import type { BookingImportPreviewItem } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { reservationsApi } from '../../api/client'
+import { useTripStore } from '../../store/tripStore'
+
+interface BookingImportModalProps {
+  isOpen: boolean
+  onClose: () => void
+  tripId: number
+  pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
+}
+
+const ACCEPTED_EXTS = ['.eml', '.pdf', '.pkpass', '.html', '.htm', '.txt']
+const MAX_FILE_BYTES = 10 * 1024 * 1024
+const MAX_FILES = 5
+
+const TYPE_ICONS: Record<string, React.FC<{ size: number; color?: string }>> = {
+  flight: Plane,
+  train: Train,
+  hotel: Hotel,
+  restaurant: UtensilsCrossed,
+  car: Car,
+  cruise: Anchor,
+  event: Calendar,
+}
+
+function typeColor(type: string): string {
+  const map: Record<string, string> = {
+    flight: '#3b82f6',
+    train: '#10b981',
+    hotel: '#8b5cf6',
+    restaurant: '#f59e0b',
+    car: '#6b7280',
+    cruise: '#06b6d4',
+    event: '#ec4899',
+  }
+  return map[type] ?? 'var(--text-faint)'
+}
+
+function formatDateTime(iso: unknown): string {
+  if (!iso) return ''
+  const str = typeof iso === 'string' ? iso : typeof iso === 'object' ? JSON.stringify(iso) : String(iso)
+  const date = str.slice(0, 10)
+  const time = str.length > 10 ? str.slice(11, 16) : ''
+  return [date, time].filter(Boolean).join(' ')
+}
+
+export default function BookingImportModal({ isOpen, onClose, tripId, pushUndo }: BookingImportModalProps) {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const loadTrip = useTripStore((s) => s.loadTrip)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const mouseDownTarget = useRef<EventTarget | null>(null)
+
+  type Phase = 'upload' | 'preview' | 'confirming'
+  const [phase, setPhase] = useState<Phase>('upload')
+  const [files, setFiles] = useState<File[]>([])
+  const [isDragOver, setIsDragOver] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [previewItems, setPreviewItems] = useState<BookingImportPreviewItem[]>([])
+  const [warnings, setWarnings] = useState<string[]>([])
+  const [excluded, setExcluded] = useState<Set<number>>(() => new Set())
+
+  const reset = () => {
+    setPhase('upload')
+    setFiles([])
+    setIsDragOver(false)
+    setLoading(false)
+    setError('')
+    setPreviewItems([])
+    setWarnings([])
+    setExcluded(new Set())
+  }
+
+  useEffect(() => {
+    if (isOpen) reset()
+    // reset is stable — intentional
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen])
+
+  const handleClose = () => { reset(); onClose() }
+
+  const validateFile = (f: File): string | null => {
+    const ext = ('.' + f.name.toLowerCase().split('.').pop()) as string
+    if (!ACCEPTED_EXTS.includes(ext)) return t('reservations.import.unsupportedFormat')
+    if (f.size > MAX_FILE_BYTES) return t('reservations.import.fileTooLarge', { name: f.name })
+    return null
+  }
+
+  const selectFiles = (incoming: File[]) => {
+    const valid: File[] = []
+    let firstErr: string | null = null
+    for (const f of incoming.slice(0, MAX_FILES)) {
+      const err = validateFile(f)
+      if (err) { firstErr = firstErr ?? err; continue }
+      valid.push(f)
+    }
+    if (valid.length === 0) { setError(firstErr ?? ''); return }
+    setFiles(valid)
+    setError(firstErr ?? '')
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const list = e.target.files ? Array.from(e.target.files) : []
+    e.target.value = ''
+    if (list.length) selectFiles(list)
+  }
+
+  const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragOver(true) }
+  const handleDragLeave = (e: React.DragEvent) => { if (e.target === e.currentTarget) setIsDragOver(false) }
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+    const list = Array.from(e.dataTransfer.files)
+    if (list.length) selectFiles(list)
+  }
+
+  const handleParse = async () => {
+    if (files.length === 0 || loading) return
+    setLoading(true)
+    setError('')
+    try {
+      const result = await reservationsApi.importBookingPreview(tripId, files)
+      setPreviewItems(result.items ?? [])
+      setWarnings(result.warnings ?? [])
+      setExcluded(new Set())
+      setPhase('preview')
+    } catch (err: any) {
+      const msg = err?.response?.data?.error ?? t('reservations.import.error')
+      setError(msg)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleConfirm = async () => {
+    const toImport = previewItems.filter((_, i) => !excluded.has(i))
+    if (toImport.length === 0) return
+    setPhase('confirming')
+    setError('')
+    try {
+      const result = await reservationsApi.importBookingConfirm(tripId, toImport)
+      const created = result.created ?? []
+      await loadTrip(tripId)
+
+      if (created.length > 0) {
+        pushUndo?.(t('undo.importBooking'), async () => {
+          try {
+            const { reservationsApi: rApi } = await import('../../api/client')
+            await Promise.all(created.map((r) => rApi.delete(tripId, r.id).catch(() => {})))
+          } catch {}
+          await loadTrip(tripId)
+        })
+        toast.success(t('reservations.import.success', { count: created.length }))
+      } else {
+        toast.warning(t('reservations.import.previewEmpty'))
+      }
+
+      handleClose()
+    } catch (err: any) {
+      setError(err?.response?.data?.error ?? t('reservations.import.error'))
+      setPhase('preview')
+    }
+  }
+
+  const toggleExclude = (idx: number) => {
+    setExcluded(prev => {
+      const next = new Set(prev)
+      if (next.has(idx)) next.delete(idx); else next.add(idx)
+      return next
+    })
+  }
+
+  const activeCount = previewItems.filter((_, i) => !excluded.has(i)).length
+
+  if (!isOpen) return null
+
+  return ReactDOM.createPortal(
+    <div
+      className="bg-[rgba(0,0,0,0.4)]"
+      style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+      onMouseDown={e => { mouseDownTarget.current = e.target }}
+      onClick={e => {
+        if (e.target === e.currentTarget && mouseDownTarget.current === e.currentTarget) handleClose()
+        mouseDownTarget.current = null
+      }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        className="bg-surface-card"
+        style={{ borderRadius: 16, width: '100%', maxWidth: 540, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif", maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}
+      >
+        {/* Header */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
+          {phase === 'preview' && (
+            <button onClick={() => setPhase('upload')} className="bg-transparent text-content-faint" style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
+              <ArrowLeft size={16} />
+            </button>
+          )}
+          <div style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
+            {t('reservations.import.title')}
+          </div>
+          <button onClick={handleClose} className="bg-transparent text-content-faint" style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+          {/* Upload phase */}
+          {phase === 'upload' && (
+            <>
+              <div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 14, lineHeight: 1.45 }}>
+                {t('reservations.import.acceptedFormats')}
+              </div>
+
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept={ACCEPTED_EXTS.join(',')}
+                multiple
+                style={{ display: 'none' }}
+                onChange={handleInputChange}
+              />
+
+              <div
+                onClick={() => fileInputRef.current?.click()}
+                onDragOver={handleDragOver}
+                onDragEnter={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                className={isDragOver ? 'bg-surface-tertiary' : 'bg-transparent'}
+                style={{
+                  width: '100%', minHeight: 100, borderRadius: 12,
+                  border: `2px dashed ${isDragOver ? 'var(--accent)' : 'var(--border-primary)'}`,
+                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+                  gap: 6, fontSize: 13, fontWeight: 500, cursor: 'pointer',
+                  marginBottom: 12, padding: 16, boxSizing: 'border-box',
+                  transition: 'border-color 0.15s, background 0.15s',
+                }}
+              >
+                <Upload size={18} strokeWidth={1.8} color={isDragOver ? 'var(--accent)' : 'var(--text-faint)'} style={{ pointerEvents: 'none' }} />
+                {isDragOver ? (
+                  <span className="text-accent" style={{ pointerEvents: 'none' }}>{t('reservations.import.dropActive')}</span>
+                ) : files.length > 0 ? (
+                  <span style={{ color: 'var(--text-primary)', textAlign: 'center', wordBreak: 'break-all', pointerEvents: 'none' }}>{files.map(f => f.name).join(', ')}</span>
+                ) : (
+                  <span style={{ color: 'var(--text-faint)', textAlign: 'center', pointerEvents: 'none' }}>{t('reservations.import.dropHere')}</span>
+                )}
+              </div>
+            </>
+          )}
+
+          {/* Preview phase */}
+          {(phase === 'preview' || phase === 'confirming') && (
+            <>
+              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 10 }}>
+                {t('reservations.import.previewHeading', { count: previewItems.length })}
+              </div>
+
+              {previewItems.length === 0 && (
+                <div className="text-content-faint" style={{ fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
+                  {t('reservations.import.previewEmpty')}
+                </div>
+              )}
+
+              {previewItems.map((item, idx) => {
+                const Icon = TYPE_ICONS[item.type] ?? Calendar
+                const isExcluded = excluded.has(idx)
+                const fromEp = item.endpoints?.find(e => e.role === 'from')
+                const toEp = item.endpoints?.find(e => e.role === 'to')
+
+                return (
+                  <div
+                    key={`${item.source.fileName}-${idx}`}
+                    className={isExcluded ? 'bg-surface-tertiary' : 'bg-surface-secondary'}
+                    style={{
+                      borderRadius: 10, padding: '10px 12px', marginBottom: 8,
+                      border: `1px solid ${isExcluded ? 'var(--border-faint)' : 'var(--border-primary)'}`,
+                      opacity: isExcluded ? 0.5 : 1, transition: 'opacity 0.15s',
+                      display: 'flex', gap: 10, alignItems: 'flex-start',
+                    }}
+                  >
+                    <div style={{ flexShrink: 0, marginTop: 2 }}>
+                      <Icon size={15} color={typeColor(item.type)} />
+                    </div>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {item.title}
+                      </div>
+                      {fromEp && toEp && (
+                        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>
+                          {fromEp.code ?? fromEp.name} → {toEp.code ?? toEp.name}
+                        </div>
+                      )}
+                      {item.reservation_time && (
+                        <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
+                          {formatDateTime(item.reservation_time)}
+                          {item.reservation_end_time && ` – ${formatDateTime(item.reservation_end_time)}`}
+                        </div>
+                      )}
+                      {item._accommodation?.check_in && (
+                        <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
+                          {formatDateTime(item._accommodation.check_in)} – {formatDateTime(item._accommodation.check_out)}
+                        </div>
+                      )}
+                      {item.confirmation_number && (
+                        <div style={{ fontSize: 11, color: 'var(--text-faint)', fontFamily: 'monospace' }}>
+                          {item.confirmation_number}
+                        </div>
+                      )}
+                    </div>
+                    <button
+                      onClick={() => toggleExclude(idx)}
+                      className="bg-transparent text-content-faint"
+                      style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, flexShrink: 0, fontSize: 11, fontFamily: 'inherit', fontWeight: 500 }}
+                      title={t('reservations.import.removeItem')}
+                    >
+                      {isExcluded ? '＋' : <X size={12} />}
+                    </button>
+                  </div>
+                )
+              })}
+            </>
+          )}
+
+          {/* Warnings */}
+          {warnings.length > 0 && (
+            <div className="bg-[rgba(245,158,11,0.08)] text-[#92400e]" style={{ border: '1px solid rgba(245,158,11,0.3)', borderRadius: 10, padding: '8px 10px', fontSize: 12, marginTop: 8, whiteSpace: 'pre-wrap' }}>
+              {warnings.join('\n')}
+            </div>
+          )}
+
+          {/* Error */}
+          {error && (
+            <div className="bg-[rgba(239,68,68,0.08)] text-[#b91c1c]" style={{ border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10, padding: '8px 10px', fontSize: 12, whiteSpace: 'pre-wrap', marginTop: 8 }}>
+              {error}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-faint)' }}>
+          <button
+            onClick={handleClose}
+            style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}
+          >
+            {t('common.cancel')}
+          </button>
+
+          {phase === 'upload' && (
+            <button
+              onClick={handleParse}
+              disabled={files.length === 0 || loading}
+              className={files.length > 0 && !loading ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
+              style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: files.length > 0 && !loading ? 'pointer' : 'default', fontFamily: 'inherit' }}
+            >
+              {loading ? t('reservations.import.parsing') : t('common.import')}
+            </button>
+          )}
+
+          {(phase === 'preview' || phase === 'confirming') && (
+            <button
+              onClick={handleConfirm}
+              disabled={activeCount === 0 || phase === 'confirming'}
+              className={activeCount > 0 && phase !== 'confirming' ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
+              style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: activeCount > 0 && phase !== 'confirming' ? 'pointer' : 'default', fontFamily: 'inherit' }}
+            >
+              {phase === 'confirming' ? t('common.loading') : t('reservations.import.confirm', { count: activeCount })}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
@@ -8,7 +8,7 @@ import { useTranslation } from '../../i18n'
 import {
  Plane, Hotel, Utensils, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Ticket, FileText, MapPin,
  Calendar, Hash, CheckCircle2, Circle, Pencil, Trash2, Plus, ChevronDown, ChevronRight, Users,
-  ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle,
+  ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle, Download,
 } from 'lucide-react'
 import { openFile } from '../../utils/fileDownload'
 import Markdown from 'react-markdown'
@@ -468,6 +468,8 @@ interface ReservationsPanelProps {
  assignments: AssignmentsMap
  files?: TripFile[]
  onAdd: () => void
+  onImport?: () => void
+  bookingImportAvailable?: boolean
  onEdit: (reservation: Reservation) => void
  onDelete: (id: number) => void
  onNavigateToFiles: () => void
@@ -475,7 +477,7 @@ interface ReservationsPanelProps {
  addManualKey?: string
 }

-export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
+export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
  const { t, locale } = useTranslation()
  const can = useCanDo()
  const trip = useTripStore((s) => s.trip)
@@ -582,20 +584,35 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
          )}

          {canEdit && (
-            <button onClick={onAdd} className="bg-accent text-accent-text" style={{
-              appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
-              display: 'inline-flex', alignItems: 'center', gap: 6,
-              padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
-              flexShrink: 0,
-              marginLeft: 'auto',
-              transition: 'opacity 0.15s ease',
-            }}
-              onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
-              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
-            >
-              <Plus size={14} strokeWidth={2.5} />
-              <span className="hidden sm:inline">{t(addManualKey)}</span>
-            </button>
+            <div style={{ display: 'flex', gap: 6, marginLeft: 'auto', flexShrink: 0 }}>
+              {onImport && bookingImportAvailable && (
+                <button onClick={onImport} className="bg-surface-card text-content" style={{
+                  appearance: 'none', border: '1px solid var(--border-primary)', cursor: 'pointer', fontFamily: 'inherit',
+                  display: 'inline-flex', alignItems: 'center', gap: 6,
+                  padding: '8px 13px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                  transition: 'opacity 0.15s ease',
+                }}
+                  onMouseEnter={e => e.currentTarget.style.opacity = '0.75'}
+                  onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+                  title={t('reservations.import.title')}
+                >
+                  <Download size={14} strokeWidth={2} />
+                  <span className="hidden sm:inline">{t('reservations.import.cta')}</span>
+                </button>
+              )}
+              <button onClick={onAdd} className="bg-accent text-accent-text" style={{
+                appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                display: 'inline-flex', alignItems: 'center', gap: 6,
+                padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                transition: 'opacity 0.15s ease',
+              }}
+                onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+                onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+              >
+                <Plus size={14} strokeWidth={2.5} />
+                <span className="hidden sm:inline">{t(addManualKey)}</span>
+              </button>
+            </div>
          )}
        </div>
      </div>