+
+ )}
)}
@@ -188,11 +206,8 @@ function AddonRow({ addon, onToggle, t }: AddonRowProps) {
Coming Soon
)}
-
- {addon.type === 'global' ? t('admin.addons.type.global') : t('admin.addons.type.trip')}
+
+ {addon.type === 'global' ? t('admin.addons.type.global') : addon.type === 'integration' ? t('admin.addons.type.integration') : t('admin.addons.type.trip')}
+
+ {integrationAddons.map(addon => (
+ {label.description}
diff --git a/client/src/components/Admin/AdminMcpTokensPanel.tsx b/client/src/components/Admin/AdminMcpTokensPanel.tsx new file mode 100644 index 0000000..8a89f92 --- /dev/null +++ b/client/src/components/Admin/AdminMcpTokensPanel.tsx @@ -0,0 +1,120 @@ +import { useState, useEffect } from 'react' +import { adminApi } from '../../api/client' +import { useToast } from '../shared/Toast' +import { Key, Trash2, User, Loader2 } from 'lucide-react' +import { useTranslation } from '../../i18n' + +interface AdminMcpToken { + id: number + name: string + token_prefix: string + created_at: string + last_used_at: string | null + user_id: number + username: string +} + +export default function AdminMcpTokensPanel() { + const [tokens, setTokens] = useState
+
+ )
+}
diff --git a/client/src/components/Admin/AuditLogPanel.tsx b/client/src/components/Admin/AuditLogPanel.tsx
new file mode 100644
index 0000000..f36d69e
--- /dev/null
+++ b/client/src/components/Admin/AuditLogPanel.tsx
@@ -0,0 +1,166 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { adminApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+import { RefreshCw, ClipboardList } from 'lucide-react'
+
+interface AuditEntry {
+ id: number
+ created_at: string
+ user_id: number | null
+ username: string | null
+ user_email: string | null
+ action: string
+ resource: string | null
+ details: Record
+
+
+ {t('admin.mcpTokens.title')}
+{t('admin.mcpTokens.subtitle')}
+
+ {isLoading ? (
+
+
+ {deleteConfirmId !== null && (
+
+
+ ) : tokens.length === 0 ? (
+
+
+ ) : (
+ <>
+ {t('admin.mcpTokens.empty')}
+
+ {t('admin.mcpTokens.tokenName')}
+ {t('admin.mcpTokens.owner')}
+ {t('admin.mcpTokens.created')}
+ {t('admin.mcpTokens.lastUsed')}
+
+
+ {tokens.map((token, i) => (
+
+
+ ))}
+
+ )}
+
+
+ {token.name}
+{token.token_prefix}...
+
+
+
+ {new Date(token.created_at).toLocaleDateString(locale)}
+
+
+ {token.last_used_at ? new Date(token.last_used_at).toLocaleDateString(locale) : t('admin.mcpTokens.never')}
+
+
+ { if (e.target === e.currentTarget) setDeleteConfirmId(null) }}>
+
+ )}
+
+
+ {t('admin.mcpTokens.deleteTitle')}
+{t('admin.mcpTokens.deleteMessage')}
+
+
+
+
+
+
+ )
+}
diff --git a/client/src/components/Admin/BackupPanel.tsx b/client/src/components/Admin/BackupPanel.tsx
index 89af898..c1fd048 100644
--- a/client/src/components/Admin/BackupPanel.tsx
+++ b/client/src/components/Admin/BackupPanel.tsx
@@ -3,6 +3,8 @@ import { backupApi } from '../../api/client'
import { useToast } from '../shared/Toast'
import { Download, Trash2, Plus, RefreshCw, RotateCcw, Upload, Clock, Check, HardDrive, AlertTriangle } from 'lucide-react'
import { useTranslation } from '../../i18n'
+import { useSettingsStore } from '../../store/settingsStore'
+import CustomSelect from '../shared/CustomSelect'
import { getApiErrorMessage } from '../../types'
const INTERVAL_OPTIONS = [
@@ -21,19 +23,35 @@ const KEEP_OPTIONS = [
{ value: 0, labelKey: 'backup.keep.forever' },
]
+const DAYS_OF_WEEK = [
+ { value: 0, labelKey: 'backup.dow.sunday' },
+ { value: 1, labelKey: 'backup.dow.monday' },
+ { value: 2, labelKey: 'backup.dow.tuesday' },
+ { value: 3, labelKey: 'backup.dow.wednesday' },
+ { value: 4, labelKey: 'backup.dow.thursday' },
+ { value: 5, labelKey: 'backup.dow.friday' },
+ { value: 6, labelKey: 'backup.dow.saturday' },
+]
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i)
+
+const DAYS_OF_MONTH = Array.from({ length: 28 }, (_, i) => i + 1)
+
export default function BackupPanel() {
const [backups, setBackups] = useState([])
const [isLoading, setIsLoading] = useState(false)
const [isCreating, setIsCreating] = useState(false)
const [restoringFile, setRestoringFile] = useState(null)
const [isUploading, setIsUploading] = useState(false)
- const [autoSettings, setAutoSettings] = useState({ enabled: false, interval: 'daily', keep_days: 7 })
+ const [autoSettings, setAutoSettings] = useState({ enabled: false, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 })
const [autoSettingsSaving, setAutoSettingsSaving] = useState(false)
const [autoSettingsDirty, setAutoSettingsDirty] = useState(false)
+ const [serverTimezone, setServerTimezone] = useState('')
const [restoreConfirm, setRestoreConfirm] = useState(null) // { type: 'file'|'upload', filename, file? }
const fileInputRef = useRef(null)
const toast = useToast()
const { t, language, locale } = useTranslation()
+ const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
const loadBackups = async () => {
setIsLoading(true)
@@ -51,6 +69,7 @@ export default function BackupPanel() {
try {
const data = await backupApi.getAutoSettings()
setAutoSettings(data.settings)
+ if (data.timezone) setServerTimezone(data.timezone)
} catch {}
}
@@ -147,10 +166,12 @@ export default function BackupPanel() {
const formatDate = (dateStr) => {
if (!dateStr) return '-'
try {
- return new Date(dateStr).toLocaleString(locale, {
+ const opts: Intl.DateTimeFormatOptions = {
day: '2-digit', month: '2-digit', year: 'numeric',
hour: '2-digit', minute: '2-digit',
- })
+ }
+ if (serverTimezone) opts.timeZone = serverTimezone
+ return new Date(dateStr).toLocaleString(locale, opts)
} catch { return dateStr }
}
@@ -331,6 +352,68 @@ export default function BackupPanel() {
+ {/* Hour picker (for daily, weekly, monthly) */}
+ {autoSettings.interval !== 'hourly' && (
+
+
+
+
+
+
+
+
+
+
+ {t('admin.audit.subtitle')}
++ {t('admin.audit.showing', { count: entries.length, total })} +
+ + {loading && entries.length === 0 ? ( +{t('common.loading')}
+ ) : entries.length === 0 ? (
+ {t('admin.audit.empty')}
+ ) : (
+
+
+
+
+
+ )}
+
+ {entries.length < total && (
+
+ )}
+ | {t('admin.audit.col.time')} | +{t('admin.audit.col.user')} | +{t('admin.audit.col.action')} | +{t('admin.audit.col.resource')} | +{t('admin.audit.col.ip')} | +{t('admin.audit.col.details')} | +
|---|---|---|---|---|---|
| {fmtTime(e.created_at)} | +{userLabel(e)} | +{e.action} | +{e.resource || '—'} | +{e.ip || '—'} | +{fmtDetails(e.details)} | +
+
+ handleAutoSettingsChange('hour', parseInt(v, 10))}
+ size="sm"
+ options={HOURS.map(h => {
+ let label: string
+ if (is12h) {
+ const period = h >= 12 ? 'PM' : 'AM'
+ const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
+ label = `${h12}:00 ${period}`
+ } else {
+ label = `${String(h).padStart(2, '0')}:00`
+ }
+ return { value: String(h), label }
+ })}
+ />
+
+ )}
+
+ {/* Day of week (for weekly) */}
+ {autoSettings.interval === 'weekly' && (
+ + {t('backup.auto.hourHint', { format: is12h ? '12h' : '24h' })}{serverTimezone ? ` (Timezone: ${serverTimezone})` : ''} +
+
+
+
+ )}
+
+ {/* Day of month (for monthly) */}
+ {autoSettings.interval === 'monthly' && (
+
+ {DAYS_OF_WEEK.map(opt => (
+
+ ))}
+
+
+
+ handleAutoSettingsChange('day_of_month', parseInt(v, 10))}
+ size="sm"
+ options={DAYS_OF_MONTH.map(d => ({ value: String(d), label: String(d) }))}
+ />
+
+ )}
+
{/* Keep duration */}
{t('backup.auto.dayOfMonthHint')}
+
diff --git a/client/src/components/Budget/BudgetPanel.tsx b/client/src/components/Budget/BudgetPanel.tsx
index 171375f..a6a8a9e 100644
--- a/client/src/components/Budget/BudgetPanel.tsx
+++ b/client/src/components/Budget/BudgetPanel.tsx
@@ -3,7 +3,7 @@ import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
import DOM from 'react-dom'
import { useTripStore } from '../../store/tripStore'
import { useTranslation } from '../../i18n'
-import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check } from 'lucide-react'
+import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight } from 'lucide-react'
import CustomSelect from '../shared/CustomSelect'
import { budgetApi } from '../../api/client'
import type { BudgetItem, BudgetMember } from '../../types'
@@ -29,8 +29,23 @@ interface PerPersonSummaryEntry {
}
// ── Helpers ──────────────────────────────────────────────────────────────────
-const CURRENCIES = ['EUR', 'USD', 'GBP', 'JPY', 'CHF', 'CZK', 'PLN', 'SEK', 'NOK', 'DKK', 'TRY', 'THB', 'AUD', 'CAD']
-const SYMBOLS = { EUR: '€', USD: '$', GBP: '£', JPY: '¥', CHF: 'CHF', CZK: 'Kč', PLN: 'zł', SEK: 'kr', NOK: 'kr', DKK: 'kr', TRY: '₺', THB: '฿', AUD: 'A$', CAD: 'C$' }
+const CURRENCIES = [
+ 'EUR', 'USD', 'GBP', 'JPY', 'CHF', 'CZK', 'PLN', 'SEK', 'NOK', 'DKK',
+ 'TRY', 'THB', 'AUD', 'CAD', 'NZD', 'BRL', 'MXN', 'INR', 'IDR', 'MYR',
+ 'PHP', 'SGD', 'KRW', 'CNY', 'HKD', 'TWD', 'ZAR', 'AED', 'SAR', 'ILS',
+ 'EGP', 'MAD', 'HUF', 'RON', 'BGN', 'HRK', 'ISK', 'RUB', 'UAH', 'BDT',
+ 'LKR', 'VND', 'CLP', 'COP', 'PEN', 'ARS',
+]
+const SYMBOLS = {
+ EUR: '€', USD: '$', GBP: '£', JPY: '¥', CHF: 'CHF', CZK: 'Kč', PLN: 'zł',
+ SEK: 'kr', NOK: 'kr', DKK: 'kr', TRY: '₺', THB: '฿', AUD: 'A$', CAD: 'C$',
+ NZD: 'NZ$', BRL: 'R$', MXN: 'MX$', INR: '₹', IDR: 'Rp', MYR: 'RM',
+ PHP: '₱', SGD: 'S$', KRW: '₩', CNY: '¥', HKD: 'HK$', TWD: 'NT$',
+ ZAR: 'R', AED: 'د.إ', SAR: '﷼', ILS: '₪', EGP: 'E£', MAD: 'MAD',
+ HUF: 'Ft', RON: 'lei', BGN: 'лв', HRK: 'kn', ISK: 'kr', RUB: '₽',
+ UAH: '₴', BDT: '৳', LKR: 'Rs', VND: '₫', CLP: 'CL$', COP: 'CO$',
+ PEN: 'S/.', ARS: 'AR$',
+}
const PIE_COLORS = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ef4444', '#14b8a6', '#f97316', '#06b6d4', '#84cc16', '#a855f7']
const fmtNum = (v, locale, cur) => {
@@ -145,9 +160,11 @@ interface ChipWithTooltipProps {
label: string
avatarUrl: string | null
size?: number
+ paid?: boolean
+ onClick?: () => void
}
-function ChipWithTooltip({ label, avatarUrl, size = 20 }: ChipWithTooltipProps) {
+function ChipWithTooltip({ label, avatarUrl, size = 20, paid, onClick }: ChipWithTooltipProps) {
const [hover, setHover] = useState(false)
const [pos, setPos] = useState({ top: 0, left: 0 })
const ref = useRef(null)
@@ -160,13 +177,19 @@ function ChipWithTooltip({ label, avatarUrl, size = 20 }: ChipWithTooltipProps)
setHover(true)
}
+ const borderColor = paid ? '#22c55e' : 'var(--border-primary)'
+ const bg = paid ? 'rgba(34,197,94,0.15)' : 'var(--bg-tertiary)'
+
return (
<>
(false)
const [appVersion, setAppVersion] = useState(null)
- const [globalAddons, setGlobalAddons] = useState([])
const darkMode = settings.dark_mode
const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
- const loadAddons = () => {
- if (user) {
- addonsApi.enabled().then(data => {
- setGlobalAddons(data.addons.filter(a => a.type === 'global'))
- }).catch(() => {})
- }
- }
- useEffect(loadAddons, [user, location.pathname])
- // Listen for addon changes from AddonManager
+ // Only show 'global' type addons in the navbar — 'integration' addons have no dedicated page
+ const globalAddons = allAddons.filter((a: Addon) => a.type === 'global' && a.enabled)
+
useEffect(() => {
- const handler = () => loadAddons()
- window.addEventListener('addons-changed', handler)
- return () => window.removeEventListener('addons-changed', handler)
- }, [user])
+ if (user) loadAddons()
+ }, [user, location.pathname])
useEffect(() => {
import('../../api/client').then(({ authApi }) => {
diff --git a/client/src/components/Map/MapView.tsx b/client/src/components/Map/MapView.tsx
index 6ca4238..26e744a 100644
--- a/client/src/components/Map/MapView.tsx
+++ b/client/src/components/Map/MapView.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState, useMemo } from 'react'
+import { useEffect, useRef, useState, useMemo, useCallback } from 'react'
import DOM from 'react-dom'
-import { MapContainer, TileLayer, Marker, Tooltip, Polyline, useMap } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Tooltip, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-cluster'
import L from 'leaflet'
import 'leaflet.markercluster/dist/MarkerCluster.css'
@@ -65,7 +65,7 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
cursor:pointer;flex-shrink:0;position:relative;
">
${badgeHtml}
`,
@@ -240,6 +240,96 @@ function RouteLabel({ midpoint, walkingText, drivingText }: RouteLabelProps) {
const mapPhotoCache = new Map()
const mapPhotoInFlight = new Set()
+// Live location tracker — blue dot with pulse animation (like Apple/Google Maps)
+function LocationTracker() {
+ const map = useMap()
+ const [position, setPosition] = useState<[number, number] | null>(null)
+ const [accuracy, setAccuracy] = useState(0)
+ const [tracking, setTracking] = useState(false)
+ const watchId = useRef setHover(false)}
+ onClick={onClick}
style={{
- width: size, height: size, borderRadius: '50%', border: '1.5px solid var(--border-primary)',
- background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
- fontSize: size * 0.4, fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
+ width: size, height: size, borderRadius: '50%', border: `2px solid ${borderColor}`,
+ background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
+ fontSize: size * 0.4, fontWeight: 700, color: paid ? '#16a34a' : 'var(--text-muted)',
+ overflow: 'hidden', flexShrink: 0, cursor: onClick ? 'pointer' : 'default',
+ transition: 'border-color 0.15s, background 0.15s',
}}>
{avatarUrl
? 
@@ -177,11 +200,19 @@ function ChipWithTooltip({ label, avatarUrl, size = 20 }: ChipWithTooltipProps)
handleUpdateField(item.id, 'persons', v != null ? parseInt(v) || null : null)} style={{ textAlign: 'center' }} placeholder="-" locale={locale} editTooltip={t('budget.editTooltip')} />
@@ -628,6 +673,91 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
{hasMultipleMembers && (budgetItems || []).some(i => i.members?.length > 0) && (
{pieSegments.length > 0 && (
@@ -641,27 +771,19 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
{label}
+ {paid && (
+ Paid
+ )}
,
document.body
)}
@@ -194,10 +225,11 @@ interface BudgetMemberChipsProps {
members?: BudgetMember[]
tripMembers?: TripMember[]
onSetMembers: (memberIds: number[]) => void
+ onTogglePaid?: (userId: number, paid: boolean) => void
compact?: boolean
}
-function BudgetMemberChips({ members = [], tripMembers = [], onSetMembers, compact = true }: BudgetMemberChipsProps) {
+function BudgetMemberChips({ members = [], tripMembers = [], onSetMembers, onTogglePaid, compact = true }: BudgetMemberChipsProps) {
const chipSize = compact ? 20 : 30
const btnSize = compact ? 18 : 28
const iconSize = compact ? (members.length > 0 ? 8 : 9) : (members.length > 0 ? 12 : 14)
@@ -237,7 +269,10 @@ function BudgetMemberChips({ members = [], tripMembers = [], onSetMembers, compa
return (
{members.map(m => (
- onTogglePaid(m.user_id, !m.paid) : undefined}
+ />
))}
@@ -553,6 +597,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
members={item.members || []}
tripMembers={tripMembers}
onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
+ onTogglePaid={(userId, paid) => toggleBudgetMemberPaid(tripId, item.id, userId, paid)}
/>
) : (
+
+
+ {settlementOpen && (
+
+ )}
+ {settlement.flows.map((flow, i) => (
+
+ )}
+
+
+ ))}
+
+ {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).length > 0 && (
+
+ →
+
+ {fmt(flow.amount, currency)}
+
+ →
+
+
+
+ )}
+
+ {t('budget.netBalances')}
+
+ {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).map(b => (
+
+
+ ))}
+
+ {b.avatar_url
+ ? 
+ : b.username?.[0]?.toUpperCase()
+ }
+
+
+ {b.username}
+
+ 0 ? '#4ade80' : '#f87171',
+ }}>
+ {b.balance > 0 ? '+' : ''}{fmt(b.balance, currency)}
+
+
+
)}
diff --git a/client/src/components/Dashboard/CurrencyWidget.tsx b/client/src/components/Dashboard/CurrencyWidget.tsx
index a9a648d..6162fc0 100644
--- a/client/src/components/Dashboard/CurrencyWidget.tsx
+++ b/client/src/components/Dashboard/CurrencyWidget.tsx
@@ -14,7 +14,7 @@ const CURRENCIES = [
const CURRENCY_OPTIONS = CURRENCIES.map(c => ({ value: c, label: c }))
export default function CurrencyWidget() {
- const { t } = useTranslation()
+ const { t, locale } = useTranslation()
const [from, setFrom] = useState(() => localStorage.getItem('currency_from') || 'EUR')
const [to, setTo] = useState(() => localStorage.getItem('currency_to') || 'USD')
const [amount, setAmount] = useState('100')
@@ -40,7 +40,7 @@ export default function CurrencyWidget() {
const rawResult = rate && amount ? (parseFloat(amount) * rate).toFixed(2) : null
const formatNumber = (num) => {
if (!num || num === '—') return '—'
- return parseFloat(num).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+ return parseFloat(num).toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
const result = rawResult
diff --git a/client/src/components/Dashboard/TimezoneWidget.tsx b/client/src/components/Dashboard/TimezoneWidget.tsx
index 087937a..f3b3a8e 100644
--- a/client/src/components/Dashboard/TimezoneWidget.tsx
+++ b/client/src/components/Dashboard/TimezoneWidget.tsx
@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react'
import { Clock, Plus, X } from 'lucide-react'
import { useTranslation } from '../../i18n'
+import { useSettingsStore } from '../../store/settingsStore'
const POPULAR_ZONES = [
{ label: 'New York', tz: 'America/New_York' },
@@ -23,9 +24,9 @@ const POPULAR_ZONES = [
{ label: 'Cairo', tz: 'Africa/Cairo' },
]
-function getTime(tz, locale) {
+function getTime(tz, locale, is12h) {
try {
- return new Date().toLocaleTimeString(locale, { timeZone: tz, hour: '2-digit', minute: '2-digit' })
+ return new Date().toLocaleTimeString(locale, { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: is12h })
} catch { return '—' }
}
@@ -42,6 +43,7 @@ function getOffset(tz) {
export default function TimezoneWidget() {
const { t, locale } = useTranslation()
+ const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
const [zones, setZones] = useState(() => {
const saved = localStorage.getItem('dashboard_timezones')
return saved ? JSON.parse(saved) : [
@@ -87,7 +89,7 @@ export default function TimezoneWidget() {
const removeZone = (tz) => setZones(zones.filter(z => z.tz !== tz))
- const localTime = new Date().toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' })
+ const localTime = new Date().toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: is12h })
const rawZone = Intl.DateTimeFormat().resolvedOptions().timeZone
const localZone = rawZone.split('/').pop().replace(/_/g, ' ')
// Show abbreviated timezone name (e.g. CET, CEST, EST)
@@ -113,7 +115,7 @@ export default function TimezoneWidget() {
{zones.map(z => (
{pieSegments.map(seg => {
const pct = grandTotal > 0 ? ((seg.value / grandTotal) * 100).toFixed(1) : '0.0'
return (
-
-
{seg.name}
- {pct}%
+ {fmt(seg.value, currency)}
+ {pct}%
)
})}
- {pieSegments.map(seg => (
-
- {seg.name}
- {fmt(seg.value, currency)}
-
- ))}
-
-
))}
{getTime(z.tz, locale)}
+{getTime(z.tz, locale, is12h)}
{z.label} {getOffset(z.tz)}
+
+
+
+ {/* Blue dot + accuracy circle */}
+ {position && (
+ <>
+ {accuracy < 500 && (
+ ${escHtml(tr('dayplan.emptyDay'))}
`
: merged.map(item => {
+ if (item.type === 'transport') {
+ const r = item.data
+ const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
+ const icon = transportIconSvg(r.type)
+ let subtitle = ''
+ if (r.type === 'flight') subtitle = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
+ else if (r.type === 'train') subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : ''].filter(Boolean).join(' · ')
+ const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
+ return `
+
+
+
+
`
+ }
+
if (item.type === 'note') {
const note = item.data
return `
diff --git a/client/src/components/Packing/PackingListPanel.tsx b/client/src/components/Packing/PackingListPanel.tsx
index 7d670db..d1cc0a0 100644
--- a/client/src/components/Packing/PackingListPanel.tsx
+++ b/client/src/components/Packing/PackingListPanel.tsx
@@ -3,9 +3,10 @@ import { useTripStore } from '../../store/tripStore'
import { useToast } from '../shared/Toast'
import { useTranslation } from '../../i18n'
import { packingApi, tripsApi, adminApi } from '../../api/client'
+import ReactDOM from 'react-dom'
import {
CheckSquare, Square, Trash2, Plus, ChevronDown, ChevronRight,
- X, Pencil, Check, MoreHorizontal, CheckCheck, RotateCcw, Luggage, UserPlus, Package, FolderPlus,
+ X, Pencil, Check, MoreHorizontal, CheckCheck, RotateCcw, Luggage, UserPlus, Package, FolderPlus, Upload,
} from 'lucide-react'
import type { PackingItem } from '../../types'
@@ -727,6 +728,9 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
const [availableTemplates, setAvailableTemplates] = useState<{ id: number; name: string; item_count: number }[]>([])
const [showTemplateDropdown, setShowTemplateDropdown] = useState(false)
const [applyingTemplate, setApplyingTemplate] = useState(false)
+ const [showImportModal, setShowImportModal] = useState(false)
+ const [importText, setImportText] = useState('')
+ const csvInputRef = useRef
+
+ ${escHtml(r.title)}${time ? ` ${time}` : ''}
+ ${subtitle ? `${escHtml(subtitle)}
` : ''}
+ ${r.confirmation_number ? `Code: ${escHtml(r.confirmation_number)}
` : ''}
+