fix(planner): only route to multi-day transport endpoints on their pickup/drop-off days (#1210 )

docs(readme): refresh dashboard, costs and trip screenshots (#1208 )
* docs(readme): refresh dashboard, costs and trip screenshots * docs(readme): correct outdated info (React 19, NestJS, 20 languages, Costs rename, passkeys, AirTrail, notifications)
2026-06-19 13:21:46 +00:00 · 2026-06-16 18:53:00 +02:00 · 2026-06-16 16:59:25 +02:00 · 2026-06-16 16:20:17 +02:00 · 2026-06-16 12:51:57 +02:00
34 changed files with 279 additions and 56 deletions
@@ -51,10 +51,10 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
  <a href="docs/screenshots/dashboard.png"><img src="docs/screenshots/dashboard.png" alt="Dashboard" width="49%" /></a>
  <a href="docs/screenshots/trip-planner.png"><img src="docs/screenshots/trip-planner.png" alt="Trip planner with 3D map" width="49%" /></a>
  <a href="docs/screenshots/journey.png"><img src="docs/screenshots/journey.png" alt="Journey journal" width="49%" /></a>
-  <a href="docs/screenshots/budget.png"><img src="docs/screenshots/budget.png" alt="Budget tracker" width="49%" /></a>
+  <a href="docs/screenshots/budget.png"><img src="docs/screenshots/budget.png" alt="Costs · expense splitting" width="49%" /></a>
  <a href="docs/screenshots/atlas.png"><img src="docs/screenshots/atlas.png" alt="Atlas · visited countries" width="49%" /></a>
  <a href="docs/screenshots/vacay.png"><img src="docs/screenshots/vacay.png" alt="Vacay planner" width="49%" /></a>
-  <a href="docs/screenshots/trip-iceland.png"><img src="docs/screenshots/trip-iceland.png" alt="Iceland Ring Road" width="49%" /></a>
+  <a href="docs/screenshots/trip-iceland.png"><img src="docs/screenshots/trip-iceland.png" alt="Trip planner · day plan and route" width="49%" /></a>
  <a href="docs/screenshots/admin.png"><img src="docs/screenshots/admin.png" alt="Admin panel" width="49%" /></a>
 </div>

@@ -79,6 +79,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 - **Drag & drop planner** — organise places into day plans with reordering and cross-day moves
 - **Interactive map** — Leaflet or Mapbox GL with 3D buildings, terrain, photo markers, clustering, route visualization
 - **Place search** — Google Places (photos, ratings, hours) or OpenStreetMap (free, no API key)
+- **Place import** — shared Google Maps / Naver Maps lists, plus GPX and KML/KMZ/GeoJSON map files
 - **Day notes** — timestamped, icon-tagged notes with drag-and-drop reordering
 - **Route optimisation** — auto-sort places and export to Google Maps
 - **Weather forecasts** — 16-day via Open-Meteo (no key) + historical climate fallback
@@ -90,7 +91,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### 🧳 Travel management

 - **Reservations** — flights, accommodations, restaurants with status, confirmation numbers, files; import from booking confirmation emails and PDFs ([KDE Itinerary](https://invent.kde.org/pim/kitinerary))
- **Budget tracking** — category-based expenses with pie chart, per-person / per-day splits, multi-currency
+- **Costs** — track and split trip expenses (Splitwise-style): per-person / per-day breakdowns, settle-up, multi-currency
 - **Packing lists** — categories, templates, user assignment, progress tracking
 - **Bag tracking** — optional weight tracking with iOS-style distribution
 - **Document manager** — attach docs, tickets, PDFs to trips / places / reservations (≤ 50 MB each)
@@ -108,6 +109,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 - **Invite links** — one-time or reusable links with expiry
 - **SSO (OIDC)** — Google, Apple, Authentik, Keycloak, or any OIDC provider
 - **2FA** — TOTP + backup codes
+- **Passkeys** — passwordless WebAuthn login (fingerprint / face / PIN / security key), admin-toggleable
 - **Collab suite** — group chat, shared notes, polls, day check-ins

 </td>
@@ -128,13 +130,13 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### 🧩 Addons (admin-toggleable)

 - **Lists** — packing lists + to-dos with templates, member assignments, optional bag tracking
- **Budget** — expense tracker with splits, pie chart, multi-currency
+- **Costs** — expense tracker with splits and settle-up (who owes whom), multi-currency
 - **Documents** — file attachments on trips, places, and reservations
 - **Collab** — chat, notes, polls, day-by-day attendance
 - **Vacay** — personal vacation planner with calendar, 100+ country holidays, carry-over tracking
 - **Atlas** — world map of visited countries, bucket list, travel stats, streak tracking, liquid-glass UI
 - **Journey** — magazine-style travel journal with entries, photos (Immich/Synology), maps, moods
- **Naver List Import** — one-click import from shared Naver Maps lists
+- **AirTrail** — connect a self-hosted AirTrail instance to import and sync flights into reservations
 - **MCP** — expose TREK to AI assistants via OAuth 2.1

 </td>
@@ -156,8 +158,9 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### ⚙️ Admin & customisation

 - **Dashboard views** — card grid or compact list · **Dark mode** — full theme with matching status bar
- **15 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID
+- **20 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID, TR, JA, KO, UK, GR
 - **Admin panel** — users, invites, packing templates, categories, addons, API keys, backups, GitHub history
+- **Notifications** — per-user preferences across email (SMTP), webhook, ntfy, and an in-app notification center
 - **Auto-backups** — scheduled with configurable retention · **Units** — °C/°F, 12h/24h, map tile sources, default coordinates

 </td>
@@ -191,9 +194,9 @@ Open `http://localhost:3000`. On first boot TREK seeds an admin account — if y
 <div align="center">

 ![Node.js](https://img.shields.io/badge/Node.js_22-339933?style=flat-square&logo=node.js&logoColor=white)
-![Express](https://img.shields.io/badge/Express-000000?style=flat-square&logo=express&logoColor=white)
+![NestJS](https://img.shields.io/badge/NestJS_11-E0234E?style=flat-square&logo=nestjs&logoColor=white)
 ![SQLite](https://img.shields.io/badge/SQLite-003B57?style=flat-square&logo=sqlite&logoColor=white)
-![React](https://img.shields.io/badge/React_18-61DAFB?style=flat-square&logo=react&logoColor=black)
+![React](https://img.shields.io/badge/React_19-61DAFB?style=flat-square&logo=react&logoColor=black)
 ![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=vite&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
 ![Tailwind](https://img.shields.io/badge/Tailwind-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white)
@@ -202,7 +205,7 @@ Open `http://localhost:3000`. On first boot TREK seeds an admin account — if y

 </div>

-Real-time sync via WebSocket (`ws`). State with Zustand. Auth via JWT + OAuth 2.1 + OIDC + TOTP MFA. Weather via Open-Meteo (no key required). Maps with Leaflet and Mapbox GL.
+Real-time sync via WebSocket (`ws`). Backend on NestJS 11. State with Zustand. Auth via JWT + OAuth 2.1 + OIDC + Passkeys (WebAuthn) + TOTP MFA. Weather via Open-Meteo (no key required). Maps with Leaflet and Mapbox GL.

 <br />

@@ -263,7 +266,7 @@ Then:
 docker compose up -d
 ```

-**HTTPS notes:** `FORCE_HTTPS=true` is optional — it adds a 301 redirect, HSTS, CSP upgrade-insecure-requests, and forces the `secure` cookie flag. Only use it behind a TLS-terminating reverse proxy. `TRUST_PROXY=1` tells Express how many proxies sit in front so real client IPs and `X-Forwarded-Proto` work.
+**HTTPS notes:** `FORCE_HTTPS=true` is optional — it adds a 301 redirect, HSTS, CSP upgrade-insecure-requests, and forces the `secure` cookie flag. Only use it behind a TLS-terminating reverse proxy. `TRUST_PROXY=1` tells the server how many proxies sit in front so real client IPs and `X-Forwarded-Proto` work.

 </details>

@@ -400,12 +403,12 @@ Caddy handles TLS and WebSockets automatically.
 | `ENCRYPTION_KEY` | At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC). Recommended: generate with `openssl rand -hex 32`. If unset, falls back to `data/.jwt_secret` (existing installs) or auto-generates a key (fresh installs). | Auto |
 | `TZ` | Timezone for logs, reminders and cron jobs (e.g. `Europe/Berlin`) | `UTC` |
 | `LOG_LEVEL` | `info` = concise user actions, `debug` = verbose details | `info` |
-| `DEFAULT_LANGUAGE` | Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar` | `en` |
+| `DEFAULT_LANGUAGE` | Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar`, `id`, `tr`, `ja`, `ko`, `uk`, `gr` | `en` |
 | `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
 | `FORCE_HTTPS` | Optional. When `true`: 301-redirects HTTP to HTTPS, sends HSTS, adds CSP `upgrade-insecure-requests`, forces the session cookie `secure` flag. Useful behind a TLS-terminating reverse proxy. Requires `TRUST_PROXY`. | `false` |
 | `HSTS_INCLUDE_SUBDOMAINS` | When `true`: adds the `includeSubDomains` directive to the HSTS header, extending HTTPS enforcement to all subdomains. Only effective when HSTS is active (`FORCE_HTTPS=true` or `NODE_ENV=production`). Leave `false` if you run other services on sibling subdomains over plain HTTP. | `false` |
 | `COOKIE_SECURE` | Controls the `secure` flag on the `trek_session` cookie. Auto-derived: on when `NODE_ENV=production` or `FORCE_HTTPS=true`. Escape hatch: set `false` to allow session cookies over plain HTTP. Not recommended in production. | auto |
-| `TRUST_PROXY` | Number of trusted reverse proxies. Tells Express to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Defaults to `1` in production; off in dev unless set. | `1` |
+| `TRUST_PROXY` | Number of trusted reverse proxies. Tells the server to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Defaults to `1` in production; off in dev unless set. | `1` |
 | `ALLOW_INTERNAL_NETWORK` | Allow outbound requests to private/RFC-1918 IPs (e.g. Immich on your LAN). Loopback and link-local addresses remain blocked. | `false` |
 | `APP_URL` | Public base URL of this instance (e.g. `https://trek.example.com`). Required when OIDC is enabled; used as base for email notification links. | — |
 | **OIDC / SSO** | | |
@@ -20,14 +20,14 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
 import { isDayInAccommodationRange, getAccommodationAnchors } from '../../utils/dayOrder'
 import {
-  TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay,
+  TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay, getTransportRouteEndpoints,
  getTransportForDay as _getTransportForDay, getMergedItems as _getMergedItems,
  type MergedItem,
 } from '../../utils/dayMerge'
 import { formatDate, formatTime, dayTotalCost, splitReservationDateTime } from '../../utils/formatters'
 import { useDayNotes } from '../../hooks/useDayNotes'
 import { RES_ICONS, getNoteIcon } from './DayPlanSidebar.constants'
-import { RouteConnector } from './DayPlanSidebarRouteConnector'
+import { RouteConnector, HotelRouteConnector } from './DayPlanSidebarRouteConnector'
 import { MobileAddPlaceButton } from './DayPlanSidebarMobileAddPlaceButton'
 import { DayPlanSidebarToolbar } from './DayPlanSidebarToolbar'
 import { DayPlanSidebarNoteModal } from './DayPlanSidebarNoteModal'
@@ -152,6 +152,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
  const [isCalculating, setIsCalculating] = useState(false)
  const [routeInfo, setRouteInfo] = useState(null)
  const [routeLegs, setRouteLegs] = useState<Record<number, RouteSegment>>({})
+  const [hotelLegs, setHotelLegs] = useState<{ top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } }>({})
+  const optimizeFromAccommodation = useSettingsStore(s => s.settings.optimize_from_accommodation)
  const legsAbortRef = useRef<AbortController | null>(null)
  const [draggingId, setDraggingId] = useState(null)
  const [lockedIds, setLockedIds] = useState(new Set())
@@ -379,12 +381,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
  // the start place's assignment id. Shares RouteCalculator's cache with the map.
  useEffect(() => {
    if (legsAbortRef.current) legsAbortRef.current.abort()
-    if (!selectedDayId || !routeShown) { setRouteLegs({}); return }
+    if (!selectedDayId || !routeShown) { setRouteLegs({}); setHotelLegs({}); return }
    const merged = mergedItemsMap[selectedDayId] || []
-    const epLoc = (r: any, role: 'from' | 'to'): { lat: number; lng: number } | null => {
-      const e = (r.endpoints || []).find((x: any) => x.role === role)
-      return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
-    }
    const runs: { id: number; lat: number; lng: number }[][] = []
    let cur: { id: number; lat: number; lng: number }[] = []
    for (const it of merged) {
@@ -392,7 +390,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
        cur.push({ id: it.data.id, lat: it.data.place.lat, lng: it.data.place.lng })
      } else if (it.type === 'transport') {
        const r = it.data
-        const from = epLoc(r, 'from'), to = epLoc(r, 'to')
+        const { from, to } = getTransportRouteEndpoints(r, selectedDayId)
        if (from || to) {
          // Located transport: route to its departure point, break the run (the
          // flight/train itself isn't driven), and let its arrival start the next.
@@ -408,7 +406,33 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
      }
    }
    if (cur.length >= 2) runs.push(cur)
-    if (runs.length === 0) { setRouteLegs({}); return }
+
+    // Hotel bookend legs: the drive from the day's accommodation to the first
+    // located place (morning) and from the last place back to it (evening). Only
+    // when the "optimize from accommodation" setting is on and the day has a hotel,
+    // mirroring the range logic the optimizer itself uses (getAccommodationAnchors).
+    const day = days.find(d => d.id === selectedDayId)
+    const dayAccs = day && optimizeFromAccommodation !== false
+      ? accommodations.filter(a => a.place_lat != null && a.place_lng != null && isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days))
+      : []
+    const checkOut = day ? dayAccs.find(a => a.end_day_id === day.id) : undefined
+    const checkIn = day ? dayAccs.find(a => a.start_day_id === day.id) : undefined
+    const transfer = !!(checkOut && checkIn && checkOut !== checkIn)
+    const startHotel = transfer ? checkOut : dayAccs[0]
+    const endHotel = transfer ? checkIn : dayAccs[0]
+    const hotelName = (a: Accommodation) => (a as any).place_name || (a as any).reservation_title || ''
+    const placePts: { lat: number; lng: number }[] = []
+    for (const it of merged) {
+      if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
+        placePts.push({ lat: it.data.place.lat, lng: it.data.place.lng })
+      }
+    }
+    const firstPlace = placePts[0]
+    const lastPlace = placePts[placePts.length - 1]
+    const wantTop = !!(startHotel && firstPlace)
+    const wantBottom = !!(endHotel && lastPlace)
+
+    if (runs.length === 0 && !wantTop && !wantBottom) { setRouteLegs({}); setHotelLegs({}); return }

    const controller = new AbortController()
    legsAbortRef.current = controller
@@ -422,9 +446,27 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
          if (err instanceof Error && err.name === 'AbortError') return
        }
      }
-      if (!controller.signal.aborted) setRouteLegs(map)
+
+      // One extra cached OSRM call per bookend; shares RouteCalculator's cache.
+      const legBetween = async (a: { lat: number; lng: number }, b: { lat: number; lng: number }): Promise<RouteSegment | undefined> => {
+        try {
+          const r = await calculateRouteWithLegs([a, b], { signal: controller.signal, profile: routeProfile })
+          return r.legs[0]
+        } catch { return undefined }
+      }
+      const hotel: { top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } } = {}
+      if (wantTop) {
+        const seg = await legBetween({ lat: startHotel!.place_lat as number, lng: startHotel!.place_lng as number }, { lat: firstPlace.lat, lng: firstPlace.lng })
+        if (seg) hotel.top = { seg, name: hotelName(startHotel!) }
+      }
+      if (wantBottom) {
+        const seg = await legBetween({ lat: lastPlace.lat, lng: lastPlace.lng }, { lat: endHotel!.place_lat as number, lng: endHotel!.place_lng as number })
+        if (seg) hotel.bottom = { seg, name: hotelName(endHotel!) }
+      }
+
+      if (!controller.signal.aborted) { setRouteLegs(map); setHotelLegs(hotel) }
    })()
-  }, [selectedDayId, routeShown, routeProfile, mergedItemsMap])
+  }, [selectedDayId, routeShown, routeProfile, mergedItemsMap, accommodations, days, optimizeFromAccommodation])

  const openAddNote = (dayId, e) => {
    e?.stopPropagation()
@@ -938,6 +980,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
    setRouteInfo,
    routeLegs,
    setRouteLegs,
+    hotelLegs,
+    setHotelLegs,
    legsAbortRef,
    draggingId,
    setDraggingId,
@@ -1085,6 +1129,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
    setRouteInfo,
    routeLegs,
    setRouteLegs,
+    hotelLegs,
+    setHotelLegs,
    legsAbortRef,
    draggingId,
    setDraggingId,
@@ -1427,6 +1473,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                      handleMergedDrop(day.id, 'note', Number(noteId), lastItem.type, lastItem.data.id, true)
                  }}
                >
+                  {isSelected && hotelLegs.top && (
+                    <HotelRouteConnector seg={hotelLegs.top.seg} name={hotelLegs.top.name} profile={routeProfile} placement="top" />
+                  )}
                  {merged.length === 0 && !dayNoteUi ? (
                    <div
                      onDragOver={e => { e.preventDefault(); if (dragOverDayId !== day.id) setDragOverDayId(day.id) }}
@@ -2057,6 +2106,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                      )
                    })
                  )}
+                  {isSelected && hotelLegs.bottom && (
+                    <HotelRouteConnector seg={hotelLegs.bottom.seg} name={hotelLegs.bottom.name} profile={routeProfile} placement="bottom" />
+                  )}
                  {/* Drop-Zone am Listenende — immer vorhanden als Drop-Target */}
                  <div
                    style={{ minHeight: 12, padding: '2px 8px' }}
@@ -1,4 +1,4 @@
-import { Car, Footprints } from 'lucide-react'
+import { Car, Footprints, Hotel } from 'lucide-react'
 import type { RouteSegment } from '../../types'

 /** Slim travel-time connector shown between two consecutive located stops in a day. */
@@ -19,3 +19,60 @@ export function RouteConnector({ seg, profile }: { seg: RouteSegment; profile: '
    </div>
  )
 }
+
+/**
+ * The hotel's bookend legs for a day: a two-line connector naming the day's
+ * accommodation with the drive to/from it. Rendered above the first place (the
+ * morning departure from the hotel) and below the last place (the evening return),
+ * when the "optimize from accommodation" setting is on and the day has a hotel.
+ */
+export function HotelRouteConnector({
+  seg,
+  profile,
+  name,
+  placement,
+}: {
+  seg: RouteSegment
+  profile: 'driving' | 'walking'
+  name: string
+  placement: 'top' | 'bottom'
+}) {
+  const driving = profile === 'driving'
+  const Icon = driving ? Car : Footprints
+  const line = { flex: 1, height: 1, minHeight: 1, alignSelf: 'center', background: 'var(--border-primary)' }
+  const hotelRow = (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '0 14px', minWidth: 0 }}>
+      <Hotel size={12} strokeWidth={1.8} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
+      <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
+        {name}
+      </span>
+    </div>
+  )
+  const travelRow = (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 14px', fontSize: 10.5, color: 'var(--text-faint)', lineHeight: 1.2 }}>
+      <div style={line} />
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
+        <Icon size={11} strokeWidth={2} />
+        <span>{seg.durationText ?? (driving ? seg.drivingText : seg.walkingText)}</span>
+        <span style={{ opacity: 0.4 }}>·</span>
+        <span>{seg.distanceText}</span>
+      </div>
+      <div style={line} />
+    </div>
+  )
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 3, padding: placement === 'top' ? '2px 0 6px' : '6px 0 2px' }}>
+      {placement === 'top' ? (
+        <>
+          {hotelRow}
+          {travelRow}
+        </>
+      ) : (
+        <>
+          {travelRow}
+          {hotelRow}
+        </>
+      )}
+    </div>
+  )
+}
@@ -1,8 +1,8 @@
 import React from 'react'

-export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
+export default function ToggleSwitch({ on, onToggle, label }: { on: boolean; onToggle: () => void; label?: string }) {
  return (
-    <button type="button" onClick={onToggle}
+    <button type="button" onClick={onToggle} aria-pressed={on} aria-label={label}
      style={{
        position: 'relative', width: 44, height: 24, minWidth: 44, flexShrink: 0,
        borderRadius: 12, border: 'none', padding: 0, cursor: 'pointer',
@@ -288,4 +288,26 @@ describe('TripFormModal', () => {
    await user.click(submitBtn.closest('button')!);
    await waitFor(() => expect(screen.getByText('Saving...')).toBeInTheDocument());
  });
+
+  it('FE-COMP-TRIPFORM-029: clearing the day count leaves the field empty (no snap to 1)', () => {
+    render(<TripFormModal {...defaultProps} trip={null} />);
+    const dayInput = document.querySelector('input[max="365"]') as HTMLInputElement;
+    expect(dayInput).toBeInTheDocument();
+    expect(dayInput.value).toBe('7');
+    fireEvent.change(dayInput, { target: { value: '' } });
+    expect(dayInput.value).toBe('');
+  });
+
+  it('FE-COMP-TRIPFORM-030: empty day count blocks submit with an error', async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    render(<TripFormModal {...defaultProps} trip={null} onSave={onSave} />);
+    await user.type(screen.getByPlaceholderText(/Summer in Japan/i), 'No-date Trip');
+    const dayInput = document.querySelector('input[max="365"]') as HTMLInputElement;
+    fireEvent.change(dayInput, { target: { value: '' } });
+    const submitBtn = screen.getAllByText('Create New Trip').find(el => el.closest('button'))!;
+    await user.click(submitBtn.closest('button')!);
+    await screen.findByText('Number of days is required');
+    expect(onSave).not.toHaveBeenCalled();
+  });
 });
@@ -40,7 +40,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
    start_date: '',
    end_date: '',
    reminder_days: 0 as number,
-    day_count: 7,
+    day_count: 7 as number | '',
  })
  const [customReminder, setCustomReminder] = useState(false)
  const [error, setError] = useState('')
@@ -100,6 +100,12 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
    if (formData.start_date && formData.end_date && new Date(formData.end_date) < new Date(formData.start_date)) {
      setError(t('dashboard.endDateError')); return
    }
+    if (!formData.start_date && !formData.end_date) {
+      const dc = Number(formData.day_count)
+      if (formData.day_count === '' || !Number.isInteger(dc) || dc < 1 || dc > 365) {
+        setError(t('dashboard.dayCountRequired')); return
+      }
+    }
    setIsLoading(true)
    try {
      const result = await onSave({
@@ -108,7 +114,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
        start_date: formData.start_date || null,
        end_date: formData.end_date || null,
        reminder_days: formData.reminder_days,
-        ...(!formData.start_date && !formData.end_date ? { day_count: formData.day_count } : {}),
+        ...(!formData.start_date && !formData.end_date ? { day_count: Number(formData.day_count) } : {}),
      })
      const createdTrip = result ? result.trip : undefined
      // Add selected members for newly created trips
@@ -320,7 +326,12 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
              {t('dashboard.dayCount')}
            </label>
            <input type="number" min={1} max={365} value={formData.day_count}
-              onChange={e => update('day_count', Math.max(1, Math.min(365, Number(e.target.value) || 1)))}
+              onChange={e => {
+                const raw = e.target.value
+                if (raw === '') { update('day_count', ''); return }
+                const n = Math.floor(Number(raw))
+                if (Number.isFinite(n)) update('day_count', Math.min(365, Math.max(1, n)))
+              }}
              className={inputCls} />
            <p className="text-xs text-slate-400 mt-1.5">{t('dashboard.dayCountHint')}</p>
          </div>
@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { useTripStore } from '../store/tripStore'
 import { calculateRouteWithLegs } from '../components/Map/RouteCalculator'
+import { getTransportRouteEndpoints } from '../utils/dayMerge'
 import type { TripStoreState } from '../store/tripStore'
 import type { RouteSegment, RouteResult } from '../types'

@@ -53,12 +54,6 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
      return pos != null
    })

-    // The departure/arrival coordinate of a transport, if its endpoints carry one.
-    const epLoc = (r: any, role: 'from' | 'to'): { lat: number; lng: number } | null => {
-      const e = (r.endpoints || []).find((x: any) => x.role === role)
-      return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
-    }
-
    // Build a unified list of places + transports sorted by effective position.
    type Entry =
      | { kind: 'place'; lat: number; lng: number; pos: number }
@@ -67,12 +62,15 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
      ...da.filter(a => a.place?.lat && a.place?.lng).map(a => ({
        kind: 'place' as const, lat: a.place.lat!, lng: a.place.lng!, pos: a.order_index,
      })),
-      ...dayTransports.map(r => ({
-        kind: 'transport' as const,
-        from: epLoc(r, 'from'),
-        to: epLoc(r, 'to'),
-        pos: (r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position) as number,
-      })),
+      ...dayTransports.map(r => {
+        const { from, to } = getTransportRouteEndpoints(r, dayId)
+        return {
+          kind: 'transport' as const,
+          from,
+          to,
+          pos: (r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position) as number,
+        }
+      }),
    ].sort((a, b) => a.pos - b.pos)

    // Group located places into driving runs.
@@ -104,7 +104,7 @@ describe('LoginPage', () => {
  });

  describe('FE-PAGE-LOGIN-007: Remember me sends remember_me to the API', () => {
-    it('renders an unchecked checkbox and forwards remember_me: true when ticked', async () => {
+    it('renders an off toggle and forwards remember_me: true when toggled on', async () => {
      let capturedBody: Record<string, unknown> | null = null;
      server.use(
        http.post('/api/auth/login', async ({ request }) => {
@@ -120,13 +120,13 @@ describe('LoginPage', () => {
        expect(screen.getByPlaceholderText(EMAIL_PLACEHOLDER)).toBeInTheDocument();
      });

-      const checkbox = screen.getByRole('checkbox', { name: /remember me/i });
-      expect(checkbox).not.toBeChecked();
+      const toggle = screen.getByRole('button', { name: /remember me/i });
+      expect(toggle).toHaveAttribute('aria-pressed', 'false');

      await user.type(screen.getByPlaceholderText(EMAIL_PLACEHOLDER), 'user@example.com');
      await user.type(screen.getByPlaceholderText(PASSWORD_PLACEHOLDER), 'password123');
-      await user.click(checkbox);
-      expect(checkbox).toBeChecked();
+      await user.click(toggle);
+      expect(toggle).toHaveAttribute('aria-pressed', 'true');
      await user.click(screen.getByRole('button', { name: /sign in/i }));

      await waitFor(() => {
@@ -2,6 +2,7 @@ import React from 'react'
 import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n'
 import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield, KeyRound, ChevronDown, Fingerprint } from 'lucide-react'
 import { useLogin } from './login/useLogin'
+import ToggleSwitch from '../components/Settings/ToggleSwitch'

 export default function LoginPage(): React.ReactElement {
  const { t, language } = useTranslation()
@@ -573,15 +574,15 @@ export default function LoginPage(): React.ReactElement {
                </div>
                {mode === 'login' && (
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginTop: 8 }}>
-                    <label style={{ display: 'flex', alignItems: 'center', gap: 7, cursor: 'pointer', color: '#374151', fontSize: 12.5, fontWeight: 500 }}>
-                      <input
-                        type="checkbox"
-                        checked={rememberMe}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setRememberMe(e.target.checked)}
-                        style={{ width: 15, height: 15, accentColor: '#111827', cursor: 'pointer', flexShrink: 0 }}
-                      />
-                      {t('login.rememberMe')}
-                    </label>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <ToggleSwitch on={rememberMe} onToggle={() => setRememberMe(!rememberMe)} label={t('login.rememberMe')} />
+                      <span
+                        onClick={() => setRememberMe(!rememberMe)}
+                        style={{ cursor: 'pointer', color: '#374151', fontSize: 12.5, fontWeight: 500, userSelect: 'none' }}
+                      >
+                        {t('login.rememberMe')}
+                      </span>
+                    </div>
                    <button type="button" onClick={() => navigate('/forgot-password')} style={{
                      background: 'none', border: 'none', cursor: 'pointer', padding: 0,
                      color: '#6b7280', fontSize: 12.5, fontWeight: 500, fontFamily: 'inherit',
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay, getTransportForDay, getMergedItems } from './dayMerge'
+import { parseTimeToMinutes, getSpanPhase, getTransportRouteEndpoints, getDisplayTimeForDay, getTransportForDay, getMergedItems } from './dayMerge'

 describe('parseTimeToMinutes', () => {
  it('parses HH:MM string', () => {
@@ -34,6 +34,38 @@ describe('getSpanPhase', () => {
  })
 })

+describe('getTransportRouteEndpoints', () => {
+  const pickup = { role: 'from', lat: 48.1, lng: 11.5 }
+  const dropoff = { role: 'to', lat: 52.5, lng: 13.4 }
+  // A car rental spanning day 1 (pickup) through day 3 (drop-off).
+  const rental = { day_id: 1, end_day_id: 3, endpoints: [pickup, dropoff] }
+
+  it('routes to the pickup only on the start day of a multi-day rental', () => {
+    expect(getTransportRouteEndpoints(rental, 1)).toEqual({ from: { lat: 48.1, lng: 11.5 }, to: null })
+  })
+
+  it('routes from the drop-off only on the end day', () => {
+    expect(getTransportRouteEndpoints(rental, 3)).toEqual({ from: null, to: { lat: 52.5, lng: 13.4 } })
+  })
+
+  it('adds no waypoints on the days in between (regression for #1210)', () => {
+    expect(getTransportRouteEndpoints(rental, 2)).toEqual({ from: null, to: null })
+  })
+
+  it('uses both endpoints for a single-day transport', () => {
+    const sameDay = { day_id: 1, end_day_id: 1, endpoints: [pickup, dropoff] }
+    expect(getTransportRouteEndpoints(sameDay, 1)).toEqual({
+      from: { lat: 48.1, lng: 11.5 },
+      to: { lat: 52.5, lng: 13.4 },
+    })
+  })
+
+  it('returns nulls when the endpoints carry no coordinates', () => {
+    const noCoords = { day_id: 1, end_day_id: 1, endpoints: [{ role: 'from' }, { role: 'to' }] }
+    expect(getTransportRouteEndpoints(noCoords, 1)).toEqual({ from: null, to: null })
+  })
+})
+
 describe('getDisplayTimeForDay', () => {
  const r = { day_id: 1, end_day_id: 3, reservation_time: '2025-01-01T09:00:00', reservation_end_time: '2025-01-03T14:00:00' }

@@ -29,6 +29,33 @@ export function getSpanPhase(
  return 'middle'
 }

+/**
+ * The route waypoints a transport contributes on a given day, respecting multi-day spans.
+ * A car rental (or any reservation whose span covers several days) is only routed to on its
+ * pickup day (the departure endpoint) and from on its drop-off day (the arrival endpoint) — on
+ * the days in between you simply hold the vehicle, so it adds no waypoints and must not pull the
+ * route to those points. Single-day transports contribute both endpoints.
+ */
+export function getTransportRouteEndpoints(
+  r: any,
+  dayId: number
+): { from: { lat: number; lng: number } | null; to: { lat: number; lng: number } | null } {
+  const ep = (role: 'from' | 'to'): { lat: number; lng: number } | null => {
+    const e = (r.endpoints || []).find((x: any) => x.role === role)
+    return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
+  }
+  switch (getSpanPhase(r, dayId)) {
+    case 'start':
+      return { from: ep('from'), to: null }
+    case 'end':
+      return { from: null, to: ep('to') }
+    case 'middle':
+      return { from: null, to: null }
+    default:
+      return { from: ep('from'), to: ep('to') }
+  }
+}
+
 export function getDisplayTimeForDay(
  r: { day_id?: number | null; end_day_id?: number | null; reservation_time?: string | null; reservation_end_time?: string | null },
  dayId: number
@@ -163,5 +163,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'تبديل العملات',
  'dashboard.aria.addTimezone': 'إضافة منطقة زمنية',
  'dashboard.aria.removeTimezone': 'إزالة {city}',
+  'dashboard.dayCountRequired': 'عدد الأيام مطلوب',
 };
 export default dashboard;
@@ -163,5 +163,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Trocar moedas',
  'dashboard.aria.addTimezone': 'Adicionar fuso horário',
  'dashboard.aria.removeTimezone': 'Remover {city}',
+  'dashboard.dayCountRequired': 'O número de dias é obrigatório',
 };
 export default dashboard;
@@ -163,5 +163,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Prohodit měny',
  'dashboard.aria.addTimezone': 'Přidat časové pásmo',
  'dashboard.aria.removeTimezone': 'Odebrat {city}',
+  'dashboard.dayCountRequired': 'Počet dní je povinný',
 };
 export default dashboard;
@@ -164,5 +164,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Währungen tauschen',
  'dashboard.aria.addTimezone': 'Zeitzone hinzufügen',
  'dashboard.aria.removeTimezone': '{city} entfernen',
+  'dashboard.dayCountRequired': 'Anzahl der Tage ist erforderlich',
 };
 export default dashboard;
@@ -163,5 +163,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Swap currencies',
  'dashboard.aria.addTimezone': 'Add timezone',
  'dashboard.aria.removeTimezone': 'Remove {city}',
+  'dashboard.dayCountRequired': 'Number of days is required',
 };
 export default dashboard;
@@ -164,5 +164,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Intercambiar monedas',
  'dashboard.aria.addTimezone': 'Añadir zona horaria',
  'dashboard.aria.removeTimezone': 'Eliminar {city}',
+  'dashboard.dayCountRequired': 'El número de días es obligatorio',
 };
 export default dashboard;
@@ -167,5 +167,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Inverser les devises',
  'dashboard.aria.addTimezone': 'Ajouter un fuseau horaire',
  'dashboard.aria.removeTimezone': 'Supprimer {city}',
+  'dashboard.dayCountRequired': 'Le nombre de jours est requis',
 };
 export default dashboard;
@@ -166,5 +166,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Swap currencies', // en-fallback
  'dashboard.aria.addTimezone': 'Add timezone', // en-fallback
  'dashboard.aria.removeTimezone': 'Remove {city}', // en-fallback
+  'dashboard.dayCountRequired': 'Ο αριθμός ημερών είναι υποχρεωτικός',
 };
 export default dashboard;
@@ -164,5 +164,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Pénznemek cseréje',
  'dashboard.aria.addTimezone': 'Időzóna hozzáadása',
  'dashboard.aria.removeTimezone': '{city} eltávolítása',
+  'dashboard.dayCountRequired': 'A napok száma kötelező',
 };
 export default dashboard;
@@ -163,5 +163,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Tukar mata uang',
  'dashboard.aria.addTimezone': 'Tambah zona waktu',
  'dashboard.aria.removeTimezone': 'Hapus {city}',
+  'dashboard.dayCountRequired': 'Jumlah hari wajib diisi',
 };
 export default dashboard;
@@ -167,5 +167,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Inverti valute',
  'dashboard.aria.addTimezone': 'Aggiungi fuso orario',
  'dashboard.aria.removeTimezone': 'Rimuovi {city}',
+  'dashboard.dayCountRequired': 'Il numero di giorni è obbligatorio',
 };
 export default dashboard;
@@ -162,5 +162,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': '通貨を入れ替え',
  'dashboard.aria.addTimezone': 'タイムゾーンを追加',
  'dashboard.aria.removeTimezone': '{city}を削除',
+  'dashboard.dayCountRequired': '日数は必須です',
 };
 export default dashboard;
@@ -162,5 +162,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': '통화 바꾸기',
  'dashboard.aria.addTimezone': '시간대 추가',
  'dashboard.aria.removeTimezone': '{city} 제거',
+  'dashboard.dayCountRequired': '일수는 필수입니다',
 };
 export default dashboard;
@@ -163,5 +163,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': "Valuta's omwisselen",
  'dashboard.aria.addTimezone': 'Tijdzone toevoegen',
  'dashboard.aria.removeTimezone': '{city} verwijderen',
+  'dashboard.dayCountRequired': 'Aantal dagen is verplicht',
 };
 export default dashboard;
@@ -163,5 +163,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Zamień waluty',
  'dashboard.aria.addTimezone': 'Dodaj strefę czasową',
  'dashboard.aria.removeTimezone': 'Usuń {city}',
+  'dashboard.dayCountRequired': 'Liczba dni jest wymagana',
 };
 export default dashboard;
@@ -163,5 +163,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Поменять валюты',
  'dashboard.aria.addTimezone': 'Добавить часовой пояс',
  'dashboard.aria.removeTimezone': 'Удалить {city}',
+  'dashboard.dayCountRequired': 'Количество дней обязательно',
 };
 export default dashboard;
@@ -162,5 +162,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Para birimlerini değiştir',
  'dashboard.aria.addTimezone': 'Saat dilimi ekle',
  'dashboard.aria.removeTimezone': '{city} kaldır',
+  'dashboard.dayCountRequired': 'Gün sayısı gereklidir',
 };
 export default dashboard;
@@ -164,5 +164,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': 'Поміняти валюти',
  'dashboard.aria.addTimezone': 'Додати часовий пояс',
  'dashboard.aria.removeTimezone': 'Вилучити {city}',
+  'dashboard.dayCountRequired': 'Вкажіть кількість днів',
 };
 export default dashboard;
@@ -161,5 +161,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': '交換貨幣',
  'dashboard.aria.addTimezone': '新增時區',
  'dashboard.aria.removeTimezone': '移除 {city}',
+  'dashboard.dayCountRequired': '天數為必填項',
 };
 export default dashboard;
@@ -161,5 +161,6 @@ const dashboard: TranslationStrings = {
  'dashboard.aria.swapCurrencies': '交换货币',
  'dashboard.aria.addTimezone': '添加时区',
  'dashboard.aria.removeTimezone': '移除 {city}',
+  'dashboard.dayCountRequired': '天数为必填项',
 };
 export default dashboard;
Author	SHA1	Message	Date
Maurice	c7fa676199	fix(planner): only route to multi-day transport endpoints on their pickup/drop-off days (#1210 )	2026-06-16 18:53:00 +02:00
Maurice	1547258c0c	docs(readme): refresh dashboard, costs and trip screenshots (#1208 ) * docs(readme): refresh dashboard, costs and trip screenshots * docs(readme): correct outdated info (React 19, NestJS, 20 languages, Costs rename, passkeys, AirTrail, notifications)	2026-06-16 16:59:25 +02:00
Maurice	a1ad512064	fix(trips): keep the day-count field empty when cleared and validate it (#1204 ) (#1207 )	2026-06-16 16:20:17 +02:00
Maurice	25324108cb	Day plan: hotel travel times at start/end + login toggle polish (#1206 ) * fix(login): use the shared toggle for the stay-signed-in option * feat(planner): show hotel travel times at the start and end of a day * fix(login): give the stay-signed-in toggle an accessible name and fix its test	2026-06-16 12:51:57 +02:00