Merge branch 'dev' into test

2026-04-05 00:36:40 +02:00
parent a038dbd8da b8058a2755
commit 399684cc19
21 changed files with 354 additions and 57 deletions
--- a/client/src/components/Files/FileManager.tsx
+++ b/client/src/components/Files/FileManager.tsx
@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom'
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
-import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check } from 'lucide-react'
+import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { filesApi } from '../../api/client'
@@ -37,49 +37,121 @@ function formatDateWithLocale(dateStr, locale) {
  } catch { return '' }
 }

-// Image lightbox
+// Image lightbox with gallery navigation
 interface ImageLightboxProps {
-  file: TripFile & { url: string }
+  files: (TripFile & { url: string })[]
+  initialIndex: number
  onClose: () => void
 }

-function ImageLightbox({ file, onClose }: ImageLightboxProps) {
+function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxProps) {
  const { t } = useTranslation()
+  const [index, setIndex] = useState(initialIndex)
  const [imgSrc, setImgSrc] = useState('')
+  const [touchStart, setTouchStart] = useState<number | null>(null)
+  const file = files[index]
+
  useEffect(() => {
-    getAuthUrl(file.url, 'download').then(setImgSrc)
-  }, [file.url])
+    setImgSrc('')
+    if (file) getAuthUrl(file.url, 'download').then(setImgSrc)
+  }, [file?.url])
+
+  const goPrev = () => setIndex(i => Math.max(0, i - 1))
+  const goNext = () => setIndex(i => Math.min(files.length - 1, i + 1))
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'ArrowLeft') goPrev()
+      if (e.key === 'ArrowRight') goNext()
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  if (!file) return null
+
+  const hasPrev = index > 0
+  const hasNext = index < files.length - 1
+  const navBtn = (side: 'left' | 'right', onClick: () => void, show: boolean): React.ReactNode => show ? (
+    <button onClick={e => { e.stopPropagation(); onClick() }}
+      style={{
+        position: 'absolute', top: '50%', [side]: 12, transform: 'translateY(-50%)', zIndex: 10,
+        background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40,
+        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+        color: 'rgba(255,255,255,0.8)', transition: 'background 0.15s',
+      }}
+      onMouseEnter={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.75)')}
+      onMouseLeave={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.5)')}>
+      {side === 'left' ? <ChevronLeft size={22} /> : <ChevronRight size={22} />}
+    </button>
+  ) : null
+
  return (
    <div
-      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.88)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 2000, display: 'flex', flexDirection: 'column' }}
      onClick={onClose}
+      onTouchStart={e => setTouchStart(e.touches[0].clientX)}
+      onTouchEnd={e => {
+        if (touchStart === null) return
+        const diff = e.changedTouches[0].clientX - touchStart
+        if (diff > 60) goPrev()
+        else if (diff < -60) goNext()
+        setTouchStart(null)
+      }}
    >
-      <div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }} onClick={e => e.stopPropagation()}>
-        <img
-          src={imgSrc}
-          alt={file.original_name}
-          style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }}
-        />
-        <div style={{ position: 'absolute', top: -40, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
-          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '80%' }}>{file.original_name}</span>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <button
-              onClick={async () => { const u = await getAuthUrl(file.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
-              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}
-              title={t('files.openTab')}
-            >
-              <ExternalLink size={16} />
-            </button>
-            <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}>
-              <X size={18} />
-            </button>
-          </div>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }} onClick={e => e.stopPropagation()}>
+        <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+          {file.original_name}
+          <span style={{ marginLeft: 8, color: 'rgba(255,255,255,0.4)' }}>{index + 1} / {files.length}</span>
+        </span>
+        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
+          <button
+            onClick={async () => { const u = await getAuthUrl(file.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}
+            title={t('files.openTab')}>
+            <ExternalLink size={16} />
+          </button>
+          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}>
+            <X size={18} />
+          </button>
        </div>
      </div>
+
+      {/* Main image + nav */}
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', minHeight: 0 }}
+        onClick={e => { if (e.target === e.currentTarget) onClose() }}>
+        {navBtn('left', goPrev, hasPrev)}
+        {imgSrc && <img src={imgSrc} alt={file.original_name} style={{ maxWidth: '85vw', maxHeight: '80vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} onClick={e => e.stopPropagation()} />}
+        {navBtn('right', goNext, hasNext)}
+      </div>
+
+      {/* Thumbnail strip */}
+      {files.length > 1 && (
+        <div style={{ display: 'flex', gap: 4, justifyContent: 'center', padding: '10px 16px', flexShrink: 0, overflowX: 'auto' }} onClick={e => e.stopPropagation()}>
+          {files.map((f, i) => (
+            <ThumbImg key={f.id} file={f} active={i === index} onClick={() => setIndex(i)} />
+          ))}
+        </div>
+      )}
    </div>
  )
 }

+function ThumbImg({ file, active, onClick }: { file: TripFile & { url: string }; active: boolean; onClick: () => void }) {
+  const [src, setSrc] = useState('')
+  useEffect(() => { getAuthUrl(file.url, 'download').then(setSrc) }, [file.url])
+  return (
+    <button onClick={onClick} style={{
+      width: 48, height: 48, borderRadius: 6, overflow: 'hidden', border: active ? '2px solid #fff' : '2px solid transparent',
+      opacity: active ? 1 : 0.5, cursor: 'pointer', padding: 0, background: '#111', flexShrink: 0, transition: 'opacity 0.15s',
+    }}>
+      {src && <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />}
+    </button>
+  )
+}
+
 // Authenticated image — fetches a short-lived download token and renders the image
 function AuthedImg({ src, style }: { src: string; style?: React.CSSProperties }) {
  const [authSrc, setAuthSrc] = useState('')
@@ -169,7 +241,7 @@ interface FileManagerProps {
 export default function FileManager({ files = [], onUpload, onDelete, onUpdate, places, days = [], assignments = {}, reservations = [], tripId, allowedFileTypes }: FileManagerProps) {
  const [uploading, setUploading] = useState(false)
  const [filterType, setFilterType] = useState('all')
-  const [lightboxFile, setLightboxFile] = useState(null)
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null)
  const [showTrash, setShowTrash] = useState(false)
  const [trashFiles, setTrashFiles] = useState<TripFile[]>([])
  const [loadingTrash, setLoadingTrash] = useState(false)
@@ -324,9 +396,12 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
    }
  }

+  const imageFiles = filteredFiles.filter(f => isImage(f.mime_type))
+
  const openFile = (file) => {
    if (isImage(file.mime_type)) {
-      setLightboxFile(file)
+      const idx = imageFiles.findIndex(f => f.id === file.id)
+      setLightboxIndex(idx >= 0 ? idx : 0)
    } else {
      setPreviewFile(file)
    }
@@ -453,7 +528,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
  return (
    <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} onPaste={handlePaste} tabIndex={-1}>
      {/* Lightbox */}
-      {lightboxFile && <ImageLightbox file={lightboxFile} onClose={() => setLightboxFile(null)} />}
+      {lightboxIndex !== null && <ImageLightbox files={imageFiles} initialIndex={lightboxIndex} onClose={() => setLightboxIndex(null)} />}

      {/* Assign modal */}
      {assignFileId && ReactDOM.createPortal(
--- a/client/src/components/Map/MapView.tsx
+++ b/client/src/components/Map/MapView.tsx
@@ -161,12 +161,13 @@ function MapController({ center, zoom }: MapControllerProps) {

 // Fit bounds when places change (fitKey triggers re-fit)
 interface BoundsControllerProps {
+  hasDayDetail?: boolean
  places: Place[]
  fitKey: number
  paddingOpts: Record<string, number>
 }

-function BoundsController({ places, fitKey, paddingOpts }: BoundsControllerProps) {
+function BoundsController({ places, fitKey, paddingOpts, hasDayDetail }: BoundsControllerProps) {
  const map = useMap()
  const prevFitKey = useRef(-1)

@@ -176,9 +177,14 @@ function BoundsController({ places, fitKey, paddingOpts }: BoundsControllerProps
    if (places.length === 0) return
    try {
      const bounds = L.latLngBounds(places.map(p => [p.lat, p.lng]))
-      if (bounds.isValid()) map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
+      if (bounds.isValid()) {
+        map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
+        if (hasDayDetail) {
+          setTimeout(() => map.panBy([0, 150], { animate: true }), 300)
+        }
+      }
    } catch {}
-  }, [fitKey, places, paddingOpts, map])
+  }, [fitKey, places, paddingOpts, map, hasDayDetail])

  return null
 }
@@ -377,17 +383,18 @@ export const MapView = memo(function MapView({
  leftWidth = 0,
  rightWidth = 0,
  hasInspector = false,
+  hasDayDetail = false,
 }) {
-  // Dynamic padding: account for sidebars + bottom inspector
+  // Dynamic padding: account for sidebars + bottom inspector + day detail panel
  const paddingOpts = useMemo(() => {
    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
    if (isMobile) return { padding: [40, 20] }
    const top = 60
-    const bottom = hasInspector ? 320 : 60
+    const bottom = hasInspector ? 320 : hasDayDetail ? 280 : 60
    const left = leftWidth + 40
    const right = rightWidth + 40
    return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
-  }, [leftWidth, rightWidth, hasInspector])
+  }, [leftWidth, rightWidth, hasInspector, hasDayDetail])

  // photoUrls: only base64 thumbs for smooth map zoom
  const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
@@ -509,7 +516,7 @@ export const MapView = memo(function MapView({
      />

      <MapController center={center} zoom={zoom} />
-      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} fitKey={fitKey} paddingOpts={paddingOpts} />
+      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} />
      <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
      <MapClickHandler onClick={onMapClick} />
      <MapContextMenuHandler onContextMenu={onMapContextMenu} />
--- a/client/src/components/Memories/MemoriesPanel.tsx
+++ b/client/src/components/Memories/MemoriesPanel.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
-import { Camera, Plus, Share2, EyeOff, Eye, X, Check, Search, ArrowUpDown, MapPin, Filter, Link2, RefreshCw, Unlink, FolderOpen, Info } from 'lucide-react'
 import apiClient, { addonsApi } from '../../api/client'
+import { Camera, Plus, Share2, EyeOff, Eye, X, Check, Search, ArrowUpDown, MapPin, Filter, Link2, RefreshCw, Unlink, FolderOpen, Info, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useTranslation } from '../../i18n'
 import { getAuthUrl, fetchImageAsBlob, clearImageQueue } from '../../api/authUrl'
@@ -912,6 +912,20 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
          setShowMobileInfo(false)
        }

+        const currentIdx = allVisible.findIndex(p => p.immich_asset_id === lightboxId)
+        const hasPrev = currentIdx > 0
+        const hasNext = currentIdx < allVisible.length - 1
+        const navigateTo = (idx: number) => {
+          const photo = allVisible[idx]
+          if (!photo) return
+          if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc)
+          setLightboxOriginalSrc('')
+          setLightboxId(photo.immich_asset_id)
+          setLightboxUserId(photo.user_id)
+          setLightboxInfo(null)
+          fetchImageAsBlob(`/api/integrations/immich/assets/${photo.immich_asset_id}/original?userId=${photo.user_id}`).then(setLightboxOriginalSrc)
+        }
+
        const exifContent = lightboxInfo ? (
          <>
            {lightboxInfo.takenAt && (
@@ -981,8 +995,12 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa

        return (
          <div onClick={closeLightbox}
+            onKeyDown={e => { if (e.key === 'ArrowLeft' && hasPrev) navigateTo(currentIdx - 1); if (e.key === 'ArrowRight' && hasNext) navigateTo(currentIdx + 1); if (e.key === 'Escape') closeLightbox() }}
+            tabIndex={0} ref={el => el?.focus()}
+            onTouchStart={e => (e.currentTarget as any)._touchX = e.touches[0].clientX}
+            onTouchEnd={e => { const start = (e.currentTarget as any)._touchX; if (start == null) return; const diff = e.changedTouches[0].clientX - start; if (diff > 60 && hasPrev) navigateTo(currentIdx - 1); else if (diff < -60 && hasNext) navigateTo(currentIdx + 1) }}
            style={{
-              position: 'absolute', inset: 0, zIndex: 100,
+              position: 'absolute', inset: 0, zIndex: 100, outline: 'none',
              background: 'rgba(0,0,0,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
            {/* Close button */}
@@ -995,6 +1013,27 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
              <X size={20} color="white" />
            </button>

+            {/* Counter */}
+            {allVisible.length > 1 && (
+              <div style={{ position: 'absolute', top: 20, left: 20, zIndex: 10, fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>
+                {currentIdx + 1} / {allVisible.length}
+              </div>
+            )}
+
+            {/* Prev/Next buttons */}
+            {hasPrev && (
+              <button onClick={e => { e.stopPropagation(); navigateTo(currentIdx - 1) }}
+                style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', zIndex: 10, background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'rgba(255,255,255,0.8)' }}>
+                <ChevronLeft size={22} />
+              </button>
+            )}
+            {hasNext && (
+              <button onClick={e => { e.stopPropagation(); navigateTo(currentIdx + 1) }}
+                style={{ position: 'absolute', right: isMobile ? 12 : 280, top: '50%', transform: 'translateY(-50%)', zIndex: 10, background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'rgba(255,255,255,0.8)' }}>
+                <ChevronRight size={22} />
+              </button>
+            )}
+
            {/* Mobile info toggle button */}
            {isMobile && (lightboxInfo || lightboxInfoLoading) && (
              <button onClick={e => { e.stopPropagation(); setShowMobileInfo(prev => !prev) }}
@@ -1008,10 +1047,11 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
              </button>
            )}

-            <div onClick={e => e.stopPropagation()} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', justifyContent: 'center', padding: 20, width: '100%', height: '100%' }}>
+            <div onClick={e => { if (e.target === e.currentTarget) closeLightbox() }} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', justifyContent: 'center', padding: 20, width: '100%', height: '100%' }}>
              <img
                src={lightboxOriginalSrc}
                alt=""
+                onClick={e => e.stopPropagation()}
                style={{ maxWidth: (!isMobile && lightboxInfo) ? 'calc(100% - 280px)' : '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 10, cursor: 'default' }}
              />

--- a/client/src/components/Packing/PackingListPanel.tsx
+++ b/client/src/components/Packing/PackingListPanel.tsx
@@ -775,10 +775,25 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
    }
  }

+  // Parse CSV line respecting quoted values (e.g. "Shirt, blue" stays as one field)
+  const parseCsvLine = (line: string): string[] => {
+    const parts: string[] = []
+    let current = ''
+    let inQuotes = false
+    for (let i = 0; i < line.length; i++) {
+      const ch = line[i]
+      if (ch === '"') { inQuotes = !inQuotes; continue }
+      if (!inQuotes && (ch === ',' || ch === ';' || ch === '\t')) { parts.push(current.trim()); current = ''; continue }
+      current += ch
+    }
+    parts.push(current.trim())
+    return parts
+  }
+
  const parseImportLines = (text: string) => {
    return text.split('\n').map(line => line.trim()).filter(Boolean).map(line => {
      // Format: Category, Name, Weight (optional), Bag (optional), checked/unchecked (optional)
-      const parts = line.split(/[,;\t]/).map(s => s.trim())
+      const parts = parseCsvLine(line)
      if (parts.length >= 2) {
        const category = parts[0]
        const name = parts[1]
@@ -1187,18 +1202,29 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
          }} onClick={e => e.stopPropagation()}>
            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>{t('packing.importTitle')}</div>
            <div style={{ fontSize: 12, color: 'var(--text-faint)', lineHeight: 1.5 }}>{t('packing.importHint')}</div>
-            <textarea
-              value={importText}
-              onChange={e => setImportText(e.target.value)}
-              rows={10}
-              placeholder={t('packing.importPlaceholder')}
-              style={{
-                width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10,
-                padding: '10px 12px', fontSize: 13, fontFamily: 'monospace',
-                outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)',
-                background: 'var(--bg-input)', resize: 'vertical', lineHeight: 1.5,
-              }}
-            />
+            <div style={{ display: 'flex', border: '1px solid var(--border-primary)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-input)' }}>
+              <div style={{
+                padding: '10px 0', fontSize: 13, fontFamily: 'monospace', lineHeight: 1.5,
+                color: 'var(--text-faint)', textAlign: 'right', userSelect: 'none',
+                background: 'var(--bg-hover)', borderRight: '1px solid var(--border-faint)',
+                minWidth: 32, flexShrink: 0,
+              }}>
+                {(importText || ' ').split('\n').map((_, i) => (
+                  <div key={i} style={{ padding: '0 6px' }}>{i + 1}</div>
+                ))}
+              </div>
+              <textarea
+                value={importText}
+                onChange={e => setImportText(e.target.value)}
+                rows={10}
+                placeholder={t('packing.importPlaceholder')}
+                style={{
+                  flex: 1, border: 'none', padding: '10px 12px', fontSize: 13, fontFamily: 'monospace',
+                  outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)',
+                  background: 'transparent', resize: 'vertical', lineHeight: 1.5,
+                }}
+              />
+            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <input ref={csvInputRef} type="file" accept=".csv,.txt" style={{ display: 'none' }} onChange={handleCsvFile} />
--- a/client/src/components/Planner/ReservationModal.tsx
+++ b/client/src/components/Planner/ReservationModal.tsx
@@ -71,10 +71,18 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
  const { t, locale } = useTranslation()
  const fileInputRef = useRef(null)

+  const budgetItems = useTripStore(s => s.budgetItems)
+  const budgetCategories = useMemo(() => {
+    const cats = new Set<string>()
+    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
+    return Array.from(cats).sort()
+  }, [budgetItems])
+
  const [form, setForm] = useState({
    title: '', type: 'other', status: 'pending',
    reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
    notes: '', assignment_id: '', accommodation_id: '',
+    price: '', budget_category: '',
    meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
    meta_departure_timezone: '', meta_arrival_timezone: '',
    meta_train_number: '', meta_platform: '', meta_seat: '',
@@ -130,12 +138,15 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
        hotel_place_id: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.place_id || '' })(),
        hotel_start_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.start_day_id || '' })(),
        hotel_end_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.end_day_id || '' })(),
+        price: meta.price || '',
+        budget_category: meta.budget_category || '',
      })
    } else {
      setForm({
        title: '', type: 'other', status: 'pending',
        reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
        notes: '', assignment_id: '', accommodation_id: '',
+        price: '', budget_category: '',
        meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
        meta_departure_timezone: '', meta_arrival_timezone: '',
        meta_train_number: '', meta_platform: '', meta_seat: '',
@@ -185,6 +196,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
      if (form.end_date) {
        combinedEndTime = form.reservation_end_time ? `${form.end_date}T${form.reservation_end_time}` : form.end_date
      }
+      if (form.price) metadata.price = form.price
+      if (form.budget_category) metadata.budget_category = form.budget_category
      const saveData: Record<string, any> = {
        title: form.title, type: form.type, status: form.status,
        reservation_time: form.reservation_time, reservation_end_time: combinedEndTime,
@@ -194,6 +207,13 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
        accommodation_id: form.type === 'hotel' ? (form.accommodation_id || null) : null,
        metadata: Object.keys(metadata).length > 0 ? metadata : null,
      }
+      // Auto-create budget entry if price is set
+      if (form.price && parseFloat(form.price) > 0) {
+        saveData.create_budget_entry = {
+          total_price: parseFloat(form.price),
+          category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other',
+        }
+      }
      // If hotel with place + days, pass hotel data for auto-creation or update
      if (form.type === 'hotel' && form.hotel_place_id && form.hotel_start_day && form.hotel_end_day) {
        saveData.create_accommodation = {
@@ -626,6 +646,35 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
          </div>
        </div>

+        {/* Price + Budget Category */}
+        <div style={{ display: 'flex', gap: 8 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>{t('reservations.price')}</label>
+            <input type="text" inputMode="decimal" value={form.price}
+              onChange={e => { const v = e.target.value; if (v === '' || /^\d*\.?\d{0,2}$/.test(v)) set('price', v) }}
+              placeholder="0.00"
+              style={inputStyle} />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>{t('reservations.budgetCategory')}</label>
+            <CustomSelect
+              value={form.budget_category}
+              onChange={v => set('budget_category', v)}
+              options={[
+                { value: '', label: t('reservations.budgetCategoryAuto') },
+                ...budgetCategories.map(c => ({ value: c, label: c })),
+              ]}
+              placeholder={t('reservations.budgetCategoryAuto')}
+              size="sm"
+            />
+          </div>
+        </div>
+        {form.price && parseFloat(form.price) > 0 && (
+          <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -4 }}>
+            {t('reservations.budgetHint')}
+          </div>
+        )}
+
        {/* Actions */}
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
--- a/client/src/i18n/translations/ar.ts
+++ b/client/src/i18n/translations/ar.ts
@@ -938,6 +938,11 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
  'reservations.linkAssignment': 'ربط بخطة اليوم',
  'reservations.pickAssignment': 'اختر عنصرًا من خطتك...',
  'reservations.noAssignment': 'بلا ربط',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'المغادرة',
  'reservations.arrivalDate': 'الوصول',
  'reservations.departureTime': 'وقت المغادرة',
--- a/client/src/i18n/translations/br.ts
+++ b/client/src/i18n/translations/br.ts
@@ -919,6 +919,11 @@ const br: Record<string, string | { name: string; category: string }[]> = {
  'reservations.linkAssignment': 'Vincular à atribuição do dia',
  'reservations.pickAssignment': 'Selecione uma atribuição do seu plano...',
  'reservations.noAssignment': 'Sem vínculo (avulsa)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Partida',
  'reservations.arrivalDate': 'Chegada',
  'reservations.departureTime': 'Hora partida',
--- a/client/src/i18n/translations/cs.ts
+++ b/client/src/i18n/translations/cs.ts
@@ -936,6 +936,11 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
  'reservations.linkAssignment': 'Propojit s přiřazením dne',
  'reservations.pickAssignment': 'Vyberte přiřazení z vašeho plánu...',
  'reservations.noAssignment': 'Bez propojení (samostatné)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Odlet',
  'reservations.arrivalDate': 'Přílet',
  'reservations.departureTime': 'Čas odletu',
--- a/client/src/i18n/translations/de.ts
+++ b/client/src/i18n/translations/de.ts
@@ -935,6 +935,11 @@ const de: Record<string, string | { name: string; category: string }[]> = {
  'reservations.linkAssignment': 'Mit Tagesplanung verknüpfen',
  'reservations.pickAssignment': 'Zuordnung aus dem Plan wählen...',
  'reservations.noAssignment': 'Keine Verknüpfung',
+  'reservations.price': 'Preis',
+  'reservations.budgetCategory': 'Budgetkategorie',
+  'reservations.budgetCategoryPlaceholder': 'z.B. Transport, Unterkunft',
+  'reservations.budgetCategoryAuto': 'Auto (aus Buchungstyp)',
+  'reservations.budgetHint': 'Beim Speichern wird automatisch ein Budgeteintrag erstellt.',
  'reservations.departureDate': 'Abflug',
  'reservations.arrivalDate': 'Ankunft',
  'reservations.departureTime': 'Abflugzeit',
--- a/client/src/i18n/translations/en.ts
+++ b/client/src/i18n/translations/en.ts
@@ -932,6 +932,11 @@ const en: Record<string, string | { name: string; category: string }[]> = {
  'reservations.linkAssignment': 'Link to day assignment',
  'reservations.pickAssignment': 'Select an assignment from your plan...',
  'reservations.noAssignment': 'No link (standalone)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Departure',
  'reservations.arrivalDate': 'Arrival',
  'reservations.departureTime': 'Dep. time',
--- a/client/src/i18n/translations/es.ts
+++ b/client/src/i18n/translations/es.ts
@@ -895,6 +895,11 @@ const es: Record<string, string> = {
  'reservations.linkAssignment': 'Vincular a una asignación del día',
  'reservations.pickAssignment': 'Selecciona una asignación de tu plan...',
  'reservations.noAssignment': 'Sin vínculo (independiente)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Salida',
  'reservations.arrivalDate': 'Llegada',
  'reservations.departureTime': 'Hora salida',
--- a/client/src/i18n/translations/fr.ts
+++ b/client/src/i18n/translations/fr.ts
@@ -934,6 +934,11 @@ const fr: Record<string, string> = {
  'reservations.linkAssignment': 'Lier à l\'affectation du jour',
  'reservations.pickAssignment': 'Sélectionnez une affectation de votre plan…',
  'reservations.noAssignment': 'Aucun lien (autonome)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Départ',
  'reservations.arrivalDate': 'Arrivée',
  'reservations.departureTime': 'Heure dép.',
--- a/client/src/i18n/translations/hu.ts
+++ b/client/src/i18n/translations/hu.ts
@@ -935,6 +935,11 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
  'reservations.linkAssignment': 'Összekapcsolás napi tervvel',
  'reservations.pickAssignment': 'Válassz hozzárendelést a tervedből...',
  'reservations.noAssignment': 'Nincs összekapcsolás (önálló)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Indulás',
  'reservations.arrivalDate': 'Érkezés',
  'reservations.departureTime': 'Indulási idő',
--- a/client/src/i18n/translations/it.ts
+++ b/client/src/i18n/translations/it.ts
@@ -935,6 +935,11 @@ const it: Record<string, string | { name: string; category: string }[]> = {
  'reservations.linkAssignment': 'Collega all\'assegnazione del giorno',
  'reservations.pickAssignment': 'Seleziona un\'assegnazione dal tuo programma...',
  'reservations.noAssignment': 'Nessun collegamento (autonomo)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Partenza',
  'reservations.arrivalDate': 'Arrivo',
  'reservations.departureTime': 'Ora part.',
--- a/client/src/i18n/translations/nl.ts
+++ b/client/src/i18n/translations/nl.ts
@@ -934,6 +934,11 @@ const nl: Record<string, string> = {
  'reservations.linkAssignment': 'Koppelen aan dagtoewijzing',
  'reservations.pickAssignment': 'Selecteer een toewijzing uit je plan...',
  'reservations.noAssignment': 'Geen koppeling (zelfstandig)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Vertrek',
  'reservations.arrivalDate': 'Aankomst',
  'reservations.departureTime': 'Vertrektijd',
--- a/client/src/i18n/translations/pl.ts
+++ b/client/src/i18n/translations/pl.ts
@@ -890,6 +890,11 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
  'reservations.linkAssignment': 'Przypisz do miejsca',
  'reservations.pickAssignment': 'Wybierz miejsce z planu...',
  'reservations.noAssignment': 'Brak przypisania (samodzielna)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Wylot',
  'reservations.arrivalDate': 'Przylot',
  'reservations.departureTime': 'Godz. wylotu',
--- a/client/src/i18n/translations/ru.ts
+++ b/client/src/i18n/translations/ru.ts
@@ -934,6 +934,11 @@ const ru: Record<string, string> = {
  'reservations.linkAssignment': 'Привязать к назначению дня',
  'reservations.pickAssignment': 'Выберите назначение из вашего плана...',
  'reservations.noAssignment': 'Без привязки (самостоятельное)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': 'Вылет',
  'reservations.arrivalDate': 'Прилёт',
  'reservations.departureTime': 'Время вылета',
--- a/client/src/i18n/translations/zh.ts
+++ b/client/src/i18n/translations/zh.ts
@@ -934,6 +934,11 @@ const zh: Record<string, string> = {
  'reservations.linkAssignment': '关联日程分配',
  'reservations.pickAssignment': '从计划中选择一个分配...',
  'reservations.noAssignment': '无关联（独立）',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
  'reservations.departureDate': '出发',
  'reservations.arrivalDate': '到达',
  'reservations.departureTime': '出发时间',
--- a/client/src/pages/TripPlannerPage.tsx
+++ b/client/src/pages/TripPlannerPage.tsx
@@ -600,6 +600,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
              leftWidth={leftCollapsed ? 0 : leftWidth}
              rightWidth={rightCollapsed ? 0 : rightWidth}
              hasInspector={!!selectedPlace}
+              hasDayDetail={!!showDayDetail && !selectedPlace}
            />


--- a/server/src/routes/reservations.ts
+++ b/server/src/routes/reservations.ts
@@ -30,7 +30,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 } = 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 } = req.body;

  const trip = verifyTripAccess(tripId, authReq.user.id);
  if (!trip) return res.status(404).json({ error: 'Trip not found' });
@@ -50,6 +50,21 @@ router.post('/', authenticate, (req: Request, res: Response) => {
    broadcast(tripId, 'accommodation:created', {}, req.headers['x-socket-id'] as string);
  }

+  // Auto-create budget entry if price was provided
+  if (create_budget_entry && create_budget_entry.total_price > 0) {
+    try {
+      const { createBudgetItem } = require('../services/budgetService');
+      const budgetItem = createBudgetItem(tripId, {
+        name: title,
+        category: create_budget_entry.category || type || 'Other',
+        total_price: create_budget_entry.total_price,
+      });
+      broadcast(tripId, 'budget:created', { item: budgetItem }, req.headers['x-socket-id'] as string);
+    } catch (err) {
+      console.error('[reservations] Failed to create budget entry:', err);
+    }
+  }
+
  res.status(201).json({ reservation });
  broadcast(tripId, 'reservation:created', { reservation }, req.headers['x-socket-id'] as string);

@@ -83,7 +98,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 } = 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 } = req.body;

  const trip = verifyTripAccess(tripId, authReq.user.id);
  if (!trip) return res.status(404).json({ error: 'Trip not found' });
@@ -104,6 +119,21 @@ router.put('/:id', authenticate, (req: Request, res: Response) => {
    broadcast(tripId, 'accommodation:updated', {}, req.headers['x-socket-id'] as string);
  }

+  // Auto-create budget entry if price was provided
+  if (create_budget_entry && create_budget_entry.total_price > 0) {
+    try {
+      const { createBudgetItem } = require('../services/budgetService');
+      const budgetItem = createBudgetItem(tripId, {
+        name: title || current.title,
+        category: create_budget_entry.category || type || current.type || 'Other',
+        total_price: create_budget_entry.total_price,
+      });
+      broadcast(tripId, 'budget:created', { item: budgetItem }, req.headers['x-socket-id'] as string);
+    } catch (err) {
+      console.error('[reservations] Failed to create budget entry:', err);
+    }
+  }
+
  res.json({ reservation });
  broadcast(tripId, 'reservation:updated', { reservation }, req.headers['x-socket-id'] as string);

--- a/server/src/services/mapsService.ts
+++ b/server/src/services/mapsService.ts
@@ -1,6 +1,7 @@
 import fetch from 'node-fetch';
 import { db } from '../db/database';
 import { decrypt_api_key } from './apiKeyCrypto';
+import { checkSsrf } from '../utils/ssrfGuard';

 // ── Interfaces ───────────────────────────────────────────────────────────────

@@ -474,8 +475,11 @@ export async function reverseGeocode(lat: string, lng: string, lang?: string): P
 export async function resolveGoogleMapsUrl(url: string): Promise<{ lat: number; lng: number; name: string | null; address: string | null }> {
  let resolvedUrl = url;

-  // Follow redirects for short URLs (goo.gl, maps.app.goo.gl)
-  if (url.includes('goo.gl') || url.includes('maps.app')) {
+  // Follow redirects for short URLs (goo.gl, maps.app.goo.gl) with SSRF protection
+  const parsed = new URL(url);
+  if (['goo.gl', 'maps.app.goo.gl'].includes(parsed.hostname)) {
+    const ssrf = await checkSsrf(url, true);
+    if (!ssrf.allowed) throw Object.assign(new Error('URL blocked by SSRF check'), { status: 403 });
    const redirectRes = await fetch(url, { redirect: 'follow', signal: AbortSignal.timeout(10000) });
    resolvedUrl = redirectRes.url;
  }