-
- {/* Mobile greeting header */}
-
-
-
{new Date().getHours() < 12 ? t('dashboard.greeting.morning') : new Date().getHours() < 18 ? t('dashboard.greeting.afternoon') : t('dashboard.greeting.evening')}
-
{user?.username || t('nav.profile')}
-
-
-
-
-
-
-
- {/* Mobile: Hero Trip (spotlight — ongoing or next upcoming) */}
- {!isLoading && spotlight && (
-
-
+
+ {spotlight && (
+ { setEditingTrip(tr); setShowForm(true) } : undefined}
- onCopy={can('trip_create') ? handleCopy : undefined}
- onDelete={can('trip_delete', spotlight) ? handleDelete : undefined}
- onArchive={can('trip_archive', spotlight) ? handleArchive : undefined}
- onClick={tr => navigate(`/trips/${tr.id}`)}
+ bundle={heroBundle}
+ locale={locale}
+ onOpen={() => navigate(`/trips/${spotlight.id}`)}
+ onEdit={() => { setEditingTrip(spotlight); setShowForm(true) }}
+ onCopy={() => setCopyTrip(spotlight)}
+ onArchive={() => spotlight.is_archived ? handleUnarchive(spotlight.id) : handleArchive(spotlight.id)}
+ onDelete={() => setDeleteTrip(spotlight)}
/>
-
- )}
-
- {/* Mobile: Quick Actions */}
-
- {can('trip_create') && (
-
)}
-
-
-
-
-
- {t('dashboard.title')}
-
-
-
- {isLoading ? t('common.loading')
- : trips.length > 0 ? `${t(trips.length !== 1 ? 'dashboard.subtitle.activeMany' : 'dashboard.subtitle.activeOne', { count: trips.length })}${archivedTrips.length > 0 ? t('dashboard.subtitle.archivedSuffix', { count: archivedTrips.length }) : ''}`
- : t('dashboard.subtitle.empty')}
-
+
-
-
-
- {can('trip_create') && (
-
-
- {/* Widget settings dropdown */}
- {showWidgetSettings && (
-
- Widgets:
-
-
-
- )}
-
- {/* Mobile widgets button — replaced by Quick Actions */}
-
-
- {/* Main content */}
-
-
- {/* Loading skeletons */}
- {isLoading && (
- <>
-
-
- {[1, 2, 3].map(i => )}
-
-
- )}
-
- {/* Empty state */}
- {!isLoading && trips.length === 0 && (
-
-
-
-
-
{t('dashboard.emptyTitle')}
-
- {t('dashboard.emptyText')}
-
- {can('trip_create') &&
}
-
- )}
-
- {/* Spotlight (grid mode, desktop only — mobile has Live Hero) */}
- {!isLoading && spotlight && viewMode === 'grid' && (
-
{ setEditingTrip(tr); setShowForm(true) } : undefined}
- onCopy={can('trip_create') ? handleCopy : undefined}
- onDelete={can('trip_delete', spotlight) ? handleDelete : undefined}
- onArchive={can('trip_archive', spotlight) ? handleArchive : undefined}
- onClick={tr => navigate(`/trips/${tr.id}`)}
- />
- )}
-
- {/* Trips — mobile cards */}
- {!isLoading && rest.length > 0 && (
-
-
-
- {rest.some(t => getTripStatus(t) === 'future' || getTripStatus(t) === 'tomorrow') ? t('dashboard.mobile.upcomingTrips') : t('dashboard.mobile.yourTrips')}
-
- {rest.length} {t('dashboard.mobile.trips')}
-
- {rest.map(trip => (
-
{ setEditingTrip(tr); setShowForm(true) } : undefined}
- onCopy={can('trip_create') ? handleCopy : undefined}
- onDelete={can('trip_delete', trip) ? handleDelete : undefined}
- onArchive={can('trip_archive', trip) ? handleArchive : undefined}
- onClick={tr => navigate(`/trips/${tr.id}`)}
- />
- ))}
-
- )}
-
- {/* Trips — desktop grid or list */}
- {!isLoading && (viewMode === 'grid' ? rest : trips).length > 0 && (
- viewMode === 'grid' ? (
-
- {rest.map(trip => (
+
+ {gridTrips.map(trip => (
{ setEditingTrip(tr); setShowForm(true) } : undefined}
- onCopy={can('trip_create') ? handleCopy : undefined}
- onDelete={can('trip_delete', trip) ? handleDelete : undefined}
- onArchive={can('trip_archive', trip) ? handleArchive : undefined}
- onClick={tr => navigate(`/trips/${tr.id}`)}
+ locale={locale}
+ onOpen={() => navigate(`/trips/${trip.id}`)}
+ onEdit={() => { setEditingTrip(trip); setShowForm(true) }}
+ onCopy={() => setCopyTrip(trip)}
+ onArchive={() => trip.is_archived ? handleUnarchive(trip.id) : handleArchive(trip.id)}
+ onDelete={() => setDeleteTrip(trip)}
/>
))}
+ {tripFilter === 'planned' && !isLoading && (
+
+ )}
- ) : (
-
- {trips.map(trip => (
- { setEditingTrip(tr); setShowForm(true) } : undefined}
- onCopy={can('trip_create') ? handleCopy : undefined}
- onDelete={can('trip_delete', trip) ? handleDelete : undefined}
- onArchive={can('trip_archive', trip) ? handleArchive : undefined}
- onClick={tr => navigate(`/trips/${tr.id}`)}
- />
- ))}
-
- )
- )}
-
- {/* Archived section */}
- {!isLoading && archivedTrips.length > 0 && (
-
-
- {showArchived && (
-
- {archivedTrips.map(trip => (
-
{ setEditingTrip(tr); setShowForm(true) } : undefined}
- onCopy={can('trip_create') ? handleCopy : undefined}
- onUnarchive={can('trip_archive', trip) ? handleUnarchive : undefined}
- onDelete={can('trip_delete', trip) ? handleDelete : undefined}
- onClick={tr => navigate(`/trips/${tr.id}`)}
- />
- ))}
-
- )}
-
- )}
+
- {/* Widgets sidebar */}
- {showSidebar && (
-
- {showCurrency && }
- {showTimezone && }
-
- )}
-
-
+
+
setShowWidgetSettings(false)}>
-
e.stopPropagation()}>
-
-
-
- {showWidgetSettings === 'mobile-currency' ? t('dashboard.mobile.currencyConverter') : showWidgetSettings === 'mobile-timezone' ? t('dashboard.mobile.timezone') : t('common.settings')}
-
-
-
-
- {(showWidgetSettings === 'mobile' || showWidgetSettings === 'mobile-currency') && }
- {(showWidgetSettings === 'mobile' || showWidgetSettings === 'mobile-timezone') && }
-
-
-
+ )
+}
+
+// ── Boarding-pass hero ───────────────────────────────────────────────────────
+function BoardingPassHero({ trip, bundle, locale, onOpen, onEdit, onCopy, onArchive, onDelete }: {
+ trip: DashboardTrip; bundle: HeroBundle | null; locale: string; onOpen: () => void
+ onEdit: () => void; onCopy: () => void; onArchive: () => void; onDelete: () => void
+}): React.ReactElement {
+ const stop = (e: React.MouseEvent, fn: () => void) => { e.stopPropagation(); fn() }
+ const status = getTripStatus(trip)
+ const start = splitDate(trip.start_date, locale)
+ const end = splitDate(trip.end_date, locale)
+ const dayCount = trip.day_count || (trip.start_date && trip.end_date
+ ? Math.round((new Date(trip.end_date).getTime() - new Date(trip.start_date).getTime()) / MS_PER_DAY) + 1
+ : null)
+
+ const until = daysUntil(trip.start_date)
+ const ongoing = status === 'ongoing'
+ let ringFraction = 0
+ let countdownNumber = ''
+ let countdownLabel = ''
+ if (ongoing && trip.end_date) {
+ const todayMid = new Date(); todayMid.setHours(0, 0, 0, 0)
+ const endMid = new Date(trip.end_date + 'T00:00:00')
+ const daysLeft = Math.max(0, Math.round((endMid.getTime() - todayMid.getTime()) / MS_PER_DAY))
+ // Ring tracks progress through the trip; the number shows what's left.
+ if (trip.start_date && dayCount) {
+ const elapsed = Math.round((Date.now() - new Date(trip.start_date + 'T00:00:00').getTime()) / MS_PER_DAY) + 1
+ ringFraction = Math.min(1, Math.max(0.04, elapsed / dayCount))
+ } else {
+ ringFraction = 0.5
+ }
+ countdownNumber = String(daysLeft)
+ countdownLabel = daysLeft === 0 ? 'Last day' : daysLeft === 1 ? 'Day left' : 'Days left'
+ } else if (until !== null && until >= 0) {
+ // Closer trips fill more of the ring (1-year horizon).
+ ringFraction = Math.min(1, Math.max(0.04, 1 - until / 365))
+ countdownNumber = String(until)
+ countdownLabel = until === 1 ? 'Day left' : 'Days left'
+ }
+ const RING_LEN = 170
+ const dashOffset = RING_LEN * (1 - ringFraction)
+
+ const members = bundle?.members || []
+ const places = (bundle?.places || []).filter(p => p.image_url)
+ const buddyCount = trip.shared_count != null ? trip.shared_count + 1 : members.length
+ const placeCount = trip.place_count || (bundle?.places.length ?? 0)
+
+ const badge = status === 'ongoing' ? 'LIVE NOW'
+ : status === 'today' ? 'STARTS TODAY'
+ : status === 'tomorrow' ? 'TOMORROW'
+ : status === 'future' ? 'UP NEXT'
+ : 'RECENT'
+
+ return (
+
+ {trip.cover_image
+ ? 
+ : }
+
+
+
+
+ {status === 'ongoing' && }
+ {badge}
+
+
+
+
+
+
+
+
+
+
+
{trip.title}
+
+
+
{ e.stopPropagation(); onOpen() }}>
+
+
Buddies
+
+ {members.slice(0, 4).map((m, i) => (
+ m.avatar_url
+ ?
+ :
{initials(m.username)}
+ ))}
+ {members.length > 4 &&
+{members.length - 4}
}
+ {members.length === 0 &&
{initials(trip.owner_username)}
}
+
+
{buddyCount} {buddyCount === 1 ? 'traveler' : 'travelers'}
+
+
+
+
Trip dates
+
+ {start ?
+ :
}
+
+ {end ?
+ :
}
+
+
{dayCount ? `${dayCount} ${dayCount === 1 ? 'day' : 'days'}` : 'No dates set'}
+
+
+
+ {countdownNumber && (
+ <>
+
+
+
{Math.round(ringFraction * 100)}%
+
+
+
{countdownNumber}
+
{countdownLabel}
+
+
+ )}
+
+
+
+
Places
+
+ {places.slice(0, 4).map(p => (
+
+ ))}
+ {places.length === 0 &&
}
+ {placeCount > 4 &&
+{placeCount - 4}
}
+
+
{placeCount} {placeCount === 1 ? 'destination' : 'destinations'}
+
+
+
+ )
+}
+
+// ── Atlas / stats row ────────────────────────────────────────────────────────
+function AtlasStats({ stats }: { stats: TravelStats | null }): React.ReactElement {
+ const countries = stats?.countries || []
+ const distanceKm = stats?.totalDistanceKm || 0
+ const distanceText = distanceKm >= 1000 ? `${(distanceKm / 1000).toFixed(1)}k` : String(distanceKm)
+ const equatorTimes = (distanceKm / 40075).toFixed(2)
+
+ return (
+
+
+
Atlas · Countries visited
+
{countries.length} of 195
+
+ {countries.slice(0, 5).map((c, i) => (
+
+ }.png`})
+
+ ))}
+ {countries.length > 5 &&
+{countries.length - 5}}
+
+
+
+
Trips total
+
{stats?.totalTrips ?? 0}
+
{stats?.totalPlaces ?? 0} places mapped
+
+
+
Days traveled
+
{stats?.totalDays ?? 0} days
+
across all trips
+
+
+
Distance flown
+
{distanceText} km
+
≈ {equatorTimes}× around the equator
+
+
+ )
+}
+
+// ── Trip card ────────────────────────────────────────────────────────────────
+function TripCard({ trip, locale, onOpen, onEdit, onCopy, onArchive, onDelete }: {
+ trip: DashboardTrip; locale: string; onOpen: () => void
+ onEdit: () => void; onCopy: () => void; onArchive: () => void; onDelete: () => void
+}): React.ReactElement {
+ const status = getTripStatus(trip)
+ const start = splitDate(trip.start_date, locale)
+ const end = splitDate(trip.end_date, locale)
+ const until = daysUntil(trip.start_date)
+
+ const statusClass = status === 'ongoing' ? '' : status === 'past' ? 'completed' : status === 'future' || status === 'today' || status === 'tomorrow' ? 'upcoming' : 'idea'
+ const statusLabel = status === 'ongoing' ? 'Live now'
+ : status === 'today' ? 'Today'
+ : status === 'tomorrow' ? 'Tomorrow'
+ : status === 'future' && until !== null ? (until > 60 ? `In ${Math.round(until / 30)} months` : `In ${until} days`)
+ : status === 'past' ? 'Completed'
+ : 'Idea'
+
+ const stop = (e: React.MouseEvent, fn: () => void) => { e.stopPropagation(); fn() }
+
+ return (
+
+
+ {trip.cover_image
+ ?
+ :
}
+
{statusLabel}
+
+
+
+
+
+
+
+
{trip.title}
+
+
+
+ {start && end ? (
+ <>
+
{start.m} {start.d}
+
+
{end.m} {end.d}
+
+ ) :
No dates set}
+
+
+
{trip.day_count ?? 0}Days
+
{trip.place_count ?? 0}Places
+
{trip.shared_count ?? 0}{trip.shared_count === 1 ? 'Buddy' : 'Buddies'}
+
+
+ )
+}
+
+// ── Currency tool (self-contained, mirrors the design's fx widget) ───────────
+const FX_FALLBACK = ['EUR', 'USD', 'GBP', 'CHF', 'JPY', 'CAD', 'AUD', 'CNY', 'SEK', 'NOK', 'DKK', 'PLN', 'CZK', 'HUF', 'TRY', 'THB', 'INR', 'BRL', 'MXN', 'ZAR']
+
+function CurrencyTool(): React.ReactElement {
+ const [from, setFrom] = useState(() => localStorage.getItem('trek_fx_from') || 'EUR')
+ const [to, setTo] = useState(() => localStorage.getItem('trek_fx_to') || 'USD')
+ const [amount, setAmount] = useState('100')
+ const [rates, setRates] = useState
| null>(null)
+
+ const fetchRate = React.useCallback(() => {
+ fetch(`https://api.exchangerate-api.com/v4/latest/${from}`)
+ .then(r => r.json())
+ .then(d => setRates(d.rates ?? null))
+ .catch(() => setRates(null))
+ }, [from])
+
+ useEffect(() => { fetchRate() }, [fetchRate])
+ useEffect(() => { localStorage.setItem('trek_fx_from', from); localStorage.setItem('trek_fx_to', to) }, [from, to])
+
+ const currencies = rates ? Object.keys(rates).sort() : FX_FALLBACK
+ const ccyOptions = currencies.map(c => ({ value: c, label: c }))
+ const rate = rates?.[to] ?? null
+ const converted = rate != null ? (parseFloat(amount.replace(',', '.')) || 0) * rate : null
+
+ const swap = () => { setFrom(to); setTo(from) }
+
+ return (
+
+
+
+
+
From
+
setAmount(e.target.value)} inputMode="decimal" />
+
+
+
+
+
+
+ {rate != null ? `1 ${from} = ${rate.toFixed(4)} ${to}` : 'Rate unavailable'}
+
+
+
+
Timezones
+
+
+ {adding && (
+
+
+
+ )}
+
+ {zones.map(tz => (
+
+
{shortZone(tz)[0]?.toUpperCase()}
+
+
{shortZone(tz)}
+
{offsetLabel(tz)}
+
+
{timeIn(tz)}
+
+
+ ))}
+ {zones.length === 0 && (
+
Noch keine weiteren Zeitzonen — über + hinzufügen
+ )}
+
+
+
+
Upcoming reservations
+
+ {items.length === 0 ? (
+
Nothing booked yet.
+ ) : (
+
+ {items.map(r => {
+ const when = r.reservation_time || (r.day_date ? r.day_date + 'T00:00:00' : null)
+ const d = when ? new Date(when) : null
+ const dateStr = d ? splitDate(d.toISOString().slice(0, 10), locale) : null
+ const timeStr = r.reservation_time ? new Date(r.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' }) : null
+ const typeClass = RES_TYPE_CLASS[r.type] || 'other'
+ return (
+
onOpen(r.trip_id)}>
+
{dateStr?.d ?? '–'}
{dateStr?.m ?? ''}
+
+
{r.title}
+
+ {timeStr && <> {timeStr} · }
+ {r.location || r.place_name || r.trip_title}
+
+
+
{RES_ICON[r.type] || }
+
+ )
+ })}
+
)}
-
-
{ setShowForm(false); setEditingTrip(null) }}
- onSave={editingTrip ? handleUpdate : handleCreate}
- trip={editingTrip}
- onCoverUpdate={handleCoverUpdate}
- />
-
- setDeleteTrip(null)}
- onConfirm={confirmDelete}
- title={t('common.delete')}
- message={t('dashboard.confirm.delete', { title: deleteTrip?.title || '' })}
- />
-
- setCopyTrip(null)}
- onConfirm={confirmCopy}
- />
-
-