feat(costs): create an expense from a booking, fix editing total-only items

Replace the inline price + budget-category fields in the Transport and
Reservation booking modals with a "Create expense" flow: the modal saves the
booking, then opens the full Costs editor prefilled (name + category mapped from
the booking type) and linked to the reservation. A booking with a linked expense
shows it inline with edit / remove.

Also fix the Costs editor so an expense with a recorded total but no payers
(transport-derived or pre-rework items) opens with its amount, lets you set the
currency, and saves - it previously showed 0 everywhere and could not be saved.
Legacy / localized categories now map to the fixed keys, and changing a booking's
type keeps its linked expense category in sync (unless it was manually set).

- shared: reservation_id on budget create, typeToCostCategory helper, i18n keys
- server: createBudgetItem stores reservation_id; keep total_price for payerless
  items; a booking update no longer wipes its linked expense and syncs the
  category on type change
- client: shared BookingCostsSection, exported ExpenseModal with prefill and an
  editable total, page-level save-then-open wiring

client/src/components/Budget/CostsPanel.tsx

@@ -662,8 +662,15 @@ function SettleHistory({ settlements, fmt, Avatar, name, onUndo, canEdit }: {
 }
 
 // ── Add / edit expense modal ───────────────────────────────────────────────
-function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
-  tripId: number; base: string; people: TripMember[]; me: number; editing: BudgetItem | null; onClose: () => void; onSaved: () => void
+export interface ExpensePrefill {
+  name?: string
+  category?: string
+  amount?: number
+  reservationId?: number
+}
+
+export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClose, onSaved }: {
+  tripId: number; base: string; people: TripMember[]; me: number; editing: BudgetItem | null; prefill?: ExpensePrefill; onClose: () => void; onSaved: () => void
 }) {
   const { t, locale } = useTranslation()
   const toast = useToast()
@@ -671,8 +678,8 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
   const { convert } = useExchangeRates(base)
   const sym = (c: string) => SYMBOLS[c] || (c + ' ')
 
-  const [name, setName] = useState(editing?.name || '')
-  const [cat, setCat] = useState<string>(editing ? catMeta(editing.category).key : 'food')
+  const [name, setName] = useState(editing?.name || prefill?.name || '')
+  const [cat, setCat] = useState<string>(editing ? catMeta(editing.category).key : (prefill?.category || 'food'))
   const [currency, setCurrency] = useState((editing?.currency || base).toUpperCase())
   const [day, setDay] = useState(editing?.expense_date || new Date().toISOString().slice(0, 10))
   const [payers, setPayers] = useState<Record<number, string>>(() => {
@@ -680,13 +687,23 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
     for (const p of editing?.payers || []) m[p.user_id] = String(p.amount)
     return m
   })
+  // Standalone total for "recorded amount, nobody has paid yet" expenses (created
+  // from a booking, or pre-rework items). Used only while no per-person amount is
+  // entered; once a payer has an amount, the total derives from the payers.
+  const [amount, setAmount] = useState<string>(() => {
+    if (editing && !(editing.payers && editing.payers.length > 0)) return editing.total_price ? String(editing.total_price) : ''
+    if (prefill?.amount != null) return String(prefill.amount)
+    return ''
+  })
   const [split, setSplit] = useState<Set<number>>(() =>
     editing ? new Set((editing.members || []).map(m => m.user_id)) : new Set(people.map(p => p.id)))
   const [saving, setSaving] = useState(false)
 
   const payersTotal = Object.values(payers).reduce((a, v) => a + (parseFloat(v) || 0), 0)
-  const each = split.size > 0 ? payersTotal / split.size : 0
-  const valid = name.trim().length > 0 && split.size > 0 && payersTotal > 0
+  const hasPayers = payersTotal > 0
+  const total = hasPayers ? payersTotal : (parseFloat(amount) || 0)
+  const each = split.size > 0 ? total / split.size : 0
+  const valid = name.trim().length > 0 && total > 0 && (hasPayers ? split.size > 0 : true)
 
   const save = async () => {
     if (!valid) return
@@ -699,6 +716,11 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
       currency,
       payers: payerList, member_ids: [...split],
       expense_date: day || null,
+      // No per-person amounts: record the typed total directly (the server keeps
+      // it instead of deriving 0 from the empty payer list).
+      ...(payerList.length === 0 ? { total_price: parseFloat(amount) || 0 } : {}),
+      // Link a freshly-created expense to its booking (create-from-booking flow).
+      ...(!editing && prefill?.reservationId ? { reservation_id: prefill.reservationId } : {}),
     }
     try {
       if (editing) await updateBudgetItem(tripId, editing.id, data)
@@ -728,7 +750,13 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
           <label className={labelCls}>{t('costs.totalAmount')}</label>
           <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px' }}>
             <span className="text-content-faint" style={{ fontSize: 15 }}>{sym(currency)}</span>
-            <span className="text-content" style={{ flex: 1, fontSize: 15, fontWeight: 600, paddingLeft: 6 }}>{payersTotal.toFixed(2)}</span>
+            {hasPayers ? (
+              <span className="text-content" style={{ flex: 1, fontSize: 15, fontWeight: 600, paddingLeft: 6 }}>{payersTotal.toFixed(2)}</span>
+            ) : (
+              <input type="number" inputMode="decimal" min="0" step="0.01" placeholder="0.00" value={amount}
+                onChange={e => setAmount(e.target.value)}
+                className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 15, fontWeight: 600, paddingLeft: 6, width: '100%' }} />
+            )}
           </div>
         </div>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
@@ -744,11 +772,11 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
           </div>
         </div>
 
-        {currency !== base && payersTotal > 0 && (
+        {currency !== base && total > 0 && (
           <div className="bg-surface-secondary border border-edge text-content-muted" style={{ borderRadius: 10, padding: '10px 12px', fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-            <span>{formatMoney(payersTotal, currency, locale)}</span>
+            <span>{formatMoney(total, currency, locale)}</span>
             <span className="text-content-faint">≈</span>
-            <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(convert(payersTotal, currency), base, locale)}</span>
+            <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(convert(total, currency), base, locale)}</span>
             <span className="text-content-faint">· {t('costs.liveRate')}</span>
           </div>
         )}

client/src/components/Budget/costsCategories.tsx

@@ -32,8 +32,32 @@ export const COST_CAT_META: Record<CostCategory, CostCategoryMeta> = {
 
 export const COST_CATEGORY_LIST: CostCategoryMeta[] = COST_CATEGORIES.map(k => COST_CAT_META[k])
 
-/** Map any stored category (incl. legacy free-text values) to a known meta. */
-export function catMeta(cat: string | null | undefined): CostCategoryMeta {
-  if (cat && cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
-  return COST_CAT_META.other
+/**
+ * Legacy / English free-text categories (and reservation type labels) mapped to
+ * the fixed keys. Bookings used to store labels like "Flight"/"Train"/"Other",
+ * which never matched the lowercase keys and fell through to `other`.
+ */
+const LEGACY_CATEGORY_MAP: Record<string, CostCategory> = {
+  flight: 'flights', flights: 'flights', plane: 'flights', flug: 'flights',
+  train: 'transport', bus: 'transport', car: 'transport', 'car rental': 'transport',
+  ferry: 'transport', boat: 'transport', taxi: 'transport', transfer: 'transport',
+  transport: 'transport', transportation: 'transport',
+  hotel: 'accommodation', accommodation: 'accommodation', lodging: 'accommodation', hostel: 'accommodation',
+  restaurant: 'food', food: 'food', dining: 'food', meal: 'food', meals: 'food',
+  grocery: 'groceries', groceries: 'groceries',
+  activity: 'activities', activities: 'activities',
+  sightseeing: 'sightseeing', sights: 'sightseeing',
+  shop: 'shopping', shopping: 'shopping',
+  fee: 'fees', fees: 'fees',
+  health: 'health', medical: 'health',
+  tip: 'tips', tips: 'tips',
+  other: 'other', misc: 'other',
+}
+
+/** Map any stored category (incl. legacy/localized free-text values) to a known meta. */
+export function catMeta(cat: string | null | undefined): CostCategoryMeta {
+  if (!cat) return COST_CAT_META.other
+  if (cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
+  const mapped = LEGACY_CATEGORY_MAP[cat.trim().toLowerCase()]
+  return mapped ? COST_CAT_META[mapped] : COST_CAT_META.other
 }

client/src/components/Planner/BookingCostsSection.tsx

@@ -0,0 +1,61 @@
+import { Plus, Pencil, Trash2 } from 'lucide-react'
+import { useTripStore } from '../../store/tripStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useTranslation } from '../../i18n'
+import { formatMoney } from '../../utils/formatters'
+import { catMeta } from '../Budget/costsCategories'
+import type { BudgetItem } from '../../types'
+
+/**
+ * The Costs block inside a booking modal. Replaces the old inline price + budget
+ * category fields: when no expense is linked yet it offers a "create expense"
+ * button (the modal saves the booking first, then opens the full Costs editor);
+ * once linked it shows the expense with edit / remove actions.
+ */
+export function BookingCostsSection({ reservationId, onCreate, onEdit, onRemove }: {
+  reservationId: number | null
+  onCreate: () => void
+  onEdit: (item: BudgetItem) => void
+  onRemove: (item: BudgetItem) => void
+}) {
+  const { t, locale } = useTranslation()
+  const budgetItems = useTripStore(s => s.budgetItems)
+  const trip = useTripStore(s => s.trip)
+  const displayCurrency = useSettingsStore(s => s.settings.default_currency)
+  const base = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
+  const linked = reservationId ? budgetItems.find(i => i.reservation_id === reservationId) : null
+
+  const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
+
+  if (linked) {
+    const meta = catMeta(linked.category)
+    const Icon = meta.Icon
+    return (
+      <div>
+        <label className={labelCls}>{t('reservations.linkedExpense')}</label>
+        <div className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10 }}>
+          <span style={{ width: 26, height: 26, borderRadius: 7, display: 'grid', placeItems: 'center', background: meta.color + '22', color: meta.color, flexShrink: 0 }}><Icon size={14} /></span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div className="text-content" style={{ fontSize: 14, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{linked.name}</div>
+            <div className="text-content-faint" style={{ fontSize: 12 }}>{t(meta.labelKey)}</div>
+          </div>
+          <span className="text-content" style={{ fontSize: 14, fontWeight: 700, flexShrink: 0 }}>{formatMoney(linked.total_price, linked.currency || base, locale)}</span>
+          <button type="button" onClick={() => onEdit(linked)} title={t('common.edit')} className="text-content-muted border border-edge bg-surface-card" style={{ display: 'inline-flex', padding: 7, borderRadius: 8, cursor: 'pointer' }}><Pencil size={13} /></button>
+          <button type="button" onClick={() => onRemove(linked)} title={t('reservations.removeExpense')} className="text-content-muted border border-edge bg-surface-card" style={{ display: 'inline-flex', padding: 7, borderRadius: 8, cursor: 'pointer' }}><Trash2 size={13} /></button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <label className={labelCls}>{t('reservations.costsLabel')}</label>
+      <button type="button" onClick={onCreate}
+        className="bg-surface-secondary border border-edge text-content"
+        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '11px 13px', borderRadius: 10, fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+        <Plus size={15} /> {t('reservations.createExpense')}
+      </button>
+      <div className="text-content-faint" style={{ fontSize: 11, marginTop: 6 }}>{t('reservations.createExpenseHint')}</div>
+    </div>
+  )
+}

client/src/components/Planner/BookingCostsSection.types.ts

@@ -0,0 +1,11 @@
+import type { BudgetItem } from '../../types'
+
+/**
+ * A request from a booking modal to open the Costs expense editor — either to
+ * edit the already-linked expense, or to create a new one prefilled from the
+ * booking (the modal saves the booking first so `reservationId` is known).
+ */
+export interface BookingExpenseRequest {
+  editItem?: BudgetItem
+  prefill?: { reservationId?: number; name?: string; category?: string; amount?: number }
+}

client/src/components/Planner/ReservationModal.test.tsx

@@ -343,56 +343,51 @@ describe('ReservationModal', () => {
 
   // ── Budget addon ─────────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-RESMODAL-024: budget section visible when budget addon is enabled', () => {
+  it('FE-PLANNER-RESMODAL-024: costs section (create expense) visible when budget addon is enabled', () => {
     seedStore(useAddonStore, {
       addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
       loaded: true,
     });
     render(<ReservationModal {...defaultProps} />);
-    expect(screen.getByText(/^Price$/i)).toBeInTheDocument();
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Create expense/i })).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-025: budget price input accepts valid decimal', async () => {
+  it('FE-PLANNER-RESMODAL-025: create-expense saves the booking (no create_budget_entry) then opens the Costs editor', async () => {
     seedStore(useAddonStore, {
       addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
       loaded: true,
     });
-    render(<ReservationModal {...defaultProps} />);
-    const priceInput = screen.getByPlaceholderText('0.00');
-    await userEvent.type(priceInput, '99.99');
-    expect((priceInput as HTMLInputElement).value).toBe('99.99');
-  });
-
-  it('FE-PLANNER-RESMODAL-026: budget hint shown when price > 0', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    render(<ReservationModal {...defaultProps} />);
-    const priceInput = screen.getByPlaceholderText('0.00');
-    await userEvent.type(priceInput, '50');
-    expect(screen.getByText(/budget entry will be created/i)).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-RESMODAL-027: budget fields included in onSave when price is set', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<ReservationModal {...defaultProps} onSave={onSave} />);
+    const onSave = vi.fn().mockResolvedValue({ id: 55 });
+    const onOpenExpense = vi.fn();
+    render(<ReservationModal {...defaultProps} onSave={onSave} onOpenExpense={onOpenExpense} />);
 
     await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Hotel Paris');
-    await userEvent.type(screen.getByPlaceholderText('0.00'), '120');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Create expense/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ create_budget_entry: expect.objectContaining({ total_price: 120 }) })
+    expect(onSave).not.toHaveBeenCalledWith(expect.objectContaining({ create_budget_entry: expect.anything() }));
+    await waitFor(() =>
+      expect(onOpenExpense).toHaveBeenCalledWith(
+        expect.objectContaining({ prefill: expect.objectContaining({ reservationId: 55 }) })
+      )
     );
   });
 
+  it('FE-PLANNER-RESMODAL-026: linked expense summary shown for a booking with a linked cost', () => {
+    seedStore(useAddonStore, {
+      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
+      loaded: true,
+    });
+    seedStore(useTripStore, {
+      trip: buildTrip({ id: 1 }),
+      budgetItems: [
+        { id: 7, trip_id: 1, name: 'Hotel deposit', total_price: 120, currency: 'EUR', category: 'accommodation', reservation_id: 9, members: [], payers: [], persons: 1, expense_date: null, paid_by_user_id: null },
+      ],
+    });
+    render(<ReservationModal {...defaultProps} reservation={buildReservation({ id: 9, type: 'hotel', title: 'Hotel Paris' })} />);
+    expect(screen.getByText('Hotel deposit')).toBeInTheDocument();
+  });
+
   // ── File upload ───────────────────────────────────────────────────────────────
 
   it('FE-PLANNER-RESMODAL-028: pending file added for new reservation on file input change', async () => {
@@ -599,22 +594,6 @@ describe('ReservationModal', () => {
     expect(filePickerItem).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-044: budget category dropdown options include existing categories', () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    seedStore(useTripStore, {
-      trip: buildTrip({ id: 1 }),
-      budgetItems: [
-        { id: 1, trip_id: 1, name: 'Flight ticket', total_price: 300, category: 'Transport', paid_by_user_id: null, persons: 1, members: [], expense_date: null },
-      ],
-    });
-    render(<ReservationModal {...defaultProps} />);
-    // Budget section is visible
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
-  });
-
   it('FE-PLANNER-RESMODAL-045: tour type shows time pickers', async () => {
     render(<ReservationModal {...defaultProps} />);
     await userEvent.click(screen.getByRole('button', { name: /^Tour$/i }));
@@ -632,31 +611,6 @@ describe('ReservationModal', () => {
     await waitFor(() => expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'other' })));
   });
 
-  it('FE-PLANNER-RESMODAL-047: clicking budget category select changes the value', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    seedStore(useTripStore, {
-      trip: buildTrip({ id: 1 }),
-      budgetItems: [
-        { id: 1, trip_id: 1, name: 'Ticket', total_price: 100, category: 'Transport', paid_by_user_id: null, persons: 1, members: [], expense_date: null },
-      ],
-    });
-    render(<ReservationModal {...defaultProps} />);
-
-    // Open the budget category CustomSelect (shows placeholder "Auto (from booking type)")
-    const budgetCategoryBtn = screen.getByText(/Auto \(from booking type\)/i).closest('button')!;
-    await userEvent.click(budgetCategoryBtn);
-
-    // Click the "Transport" category option
-    await waitFor(() => expect(screen.getByText('Transport')).toBeInTheDocument());
-    await userEvent.click(screen.getByText('Transport'));
-
-    // The select should now show "Transport"
-    expect(screen.getByText('Transport')).toBeInTheDocument();
-  });
-
   it('FE-PLANNER-RESMODAL-048: clicking attach file button triggers file input', async () => {
     render(<ReservationModal {...defaultProps} />);
     const attachBtn = screen.getByRole('button', { name: /Attach file/i });

client/src/components/Planner/ReservationModal.tsx

@@ -11,7 +11,10 @@ import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import CustomTimePicker from '../shared/CustomTimePicker'
 import { openFile } from '../../utils/fileDownload'
-import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation } from '../../types'
+import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation, BudgetItem } from '../../types'
+import { BookingCostsSection } from './BookingCostsSection'
+import type { BookingExpenseRequest } from './BookingCostsSection.types'
+import { typeToCostCategory } from '@trek/shared'
 
 const TYPE_OPTIONS = [
   { value: 'hotel',      labelKey: 'reservations.type.hotel',      Icon: Hotel },
@@ -60,9 +63,10 @@ interface ReservationModalProps {
   onFileDelete: (fileId: number) => Promise<void>
   accommodations?: Accommodation[]
   defaultAssignmentId?: number | null
+  onOpenExpense?: (req: BookingExpenseRequest) => void
 }
 
-export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [], defaultAssignmentId = null }: ReservationModalProps) {
+export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [], defaultAssignmentId = null, onOpenExpense }: ReservationModalProps) {
   const { id: tripId } = useParams<{ id: string }>()
   const loadFiles = useTripStore(s => s.loadFiles)
   const toast = useToast()
@@ -70,18 +74,14 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const fileInputRef = useRef(null)
 
   const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
-  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 deleteBudgetItem = useTripStore(s => s.deleteBudgetItem)
+  // Set right before submit when the user clicked create/edit expense (see TransportModal).
+  const expenseIntentRef = useRef<{ editItem?: BudgetItem; create?: boolean } | null>(null)
 
   const [form, setForm] = useState({
     title: '', type: 'other', status: 'pending',
     reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
     notes: '', assignment_id: '' as string | number, accommodation_id: '' as string | number,
-    price: '', budget_category: '',
     meta_check_in_time: '', meta_check_in_end_time: '', meta_check_out_time: '',
     hotel_place_id: '' as string | number, hotel_start_day: '' as string | number, hotel_end_day: '' as string | number,
   })
@@ -127,15 +127,12 @@ 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 && budgetItems.some(i => i.category === meta.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: defaultAssignmentId ?? '', accommodation_id: '',
-        price: '', budget_category: '',
         meta_check_in_time: '', meta_check_in_end_time: '', meta_check_out_time: '',
         hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
       })
@@ -167,8 +164,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
     return endFull <= startFull
   })()
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
+  const handleSubmit = async (e?: { preventDefault?: () => void }) => {
+    e?.preventDefault?.()
     if (!form.title.trim()) return
     if (isEndBeforeStart) { toast.error(t('reservations.validation.endBeforeStart')); return }
     setIsSaving(true)
@@ -185,11 +182,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
       } else if (form.reservation_end_time && form.reservation_time) {
         combinedEndTime = `${form.reservation_time.split('T')[0]}T${form.reservation_end_time}`
       }
-      if (isBudgetEnabled) {
-        if (form.price) metadata.price = form.price
-        if (form.budget_category) metadata.budget_category = form.budget_category
-      }
-
       const saveData: Record<string, any> & { title: string } = {
         title: form.title, type: form.type, status: form.status,
         reservation_time: form.type === 'hotel' ? null : (form.reservation_time || null),
@@ -202,11 +194,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         endpoints: [],
         needs_review: false,
       }
-      if (isBudgetEnabled) {
-        saveData.create_budget_entry = form.price && parseFloat(form.price) > 0
-          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
-          : { total_price: 0 }
-      }
       if (form.type === 'hotel' && form.hotel_start_day && form.hotel_end_day) {
         saveData.create_accommodation = {
           place_id: form.hotel_place_id || null,
@@ -228,11 +215,25 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           await onFileUpload(fd)
         }
       }
+      // Open the Costs editor for the saved booking when the user asked to
+      // create/edit its linked expense (gated on saved?.id).
+      const intent = expenseIntentRef.current
+      expenseIntentRef.current = null
+      if (intent && onOpenExpense && saved?.id) {
+        if (intent.editItem) onOpenExpense({ editItem: intent.editItem })
+        else onOpenExpense({ prefill: { reservationId: saved.id, name: form.title, category: typeToCostCategory(form.type) } })
+      }
     } finally {
       setIsSaving(false)
     }
   }
 
+  const handleCreateExpense = () => { expenseIntentRef.current = { create: true }; handleSubmit() }
+  const handleEditExpense = (item: BudgetItem) => { expenseIntentRef.current = { editItem: item }; handleSubmit() }
+  const handleRemoveExpense = async (item: BudgetItem) => {
+    try { await deleteBudgetItem(Number(tripId), item.id) } catch { toast.error(t('common.unknownError')) }
+  }
+
   const handleFileChange = async (e) => {
     const file = (e.target as HTMLInputElement).files?.[0]
     if (!file) return
@@ -610,38 +611,14 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           </div>
         </div>
 
-        {/* Price + Budget Category */}
+        {/* Costs — create / view the expense linked to this booking */}
         {isBudgetEnabled && (
-          <>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{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.replace(',', '.')) }}
-                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
-                  placeholder="0.00"
-                  className={inputClass} />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{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 className="text-content-faint" style={{ fontSize: 11, marginTop: -4 }}>
-                {t('reservations.budgetHint')}
-              </div>
-            )}
-          </>
+          <BookingCostsSection
+            reservationId={reservation?.id ?? null}
+            onCreate={handleCreateExpense}
+            onEdit={handleEditExpense}
+            onRemove={handleRemoveExpense}
+          />
         )}
 
       </form>

client/src/components/Planner/TransportModal.test.tsx

@@ -132,34 +132,37 @@ describe('TransportModal', () => {
 
   // ── Budget addon ─────────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-TRANSMODAL-011: budget section visible when addon is enabled', () => {
+  it('FE-PLANNER-TRANSMODAL-011: costs section (create expense) visible when budget addon is enabled', () => {
     seedStore(useAddonStore, {
       addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
       loaded: true,
     });
     render(<TransportModal {...defaultProps} />);
-    expect(screen.getByText(/^Price$/i)).toBeInTheDocument();
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Create expense/i })).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-TRANSMODAL-012: budget section not shown when addon is disabled', () => {
+  it('FE-PLANNER-TRANSMODAL-012: costs section not shown when budget addon is disabled', () => {
     render(<TransportModal {...defaultProps} />);
-    expect(screen.queryByPlaceholderText('0.00')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Create expense/i })).not.toBeInTheDocument();
   });
 
-  it('FE-PLANNER-TRANSMODAL-013: budget fields included in onSave when price is set', async () => {
+  it('FE-PLANNER-TRANSMODAL-013: create-expense saves the booking (no create_budget_entry) then opens the Costs editor', async () => {
     seedStore(useAddonStore, {
       addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
       loaded: true,
     });
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<TransportModal {...defaultProps} onSave={onSave} />);
+    const onSave = vi.fn().mockResolvedValue({ id: 42 });
+    const onOpenExpense = vi.fn();
+    render(<TransportModal {...defaultProps} onSave={onSave} onOpenExpense={onOpenExpense} />);
     await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'ICE Train');
-    await userEvent.type(screen.getByPlaceholderText('0.00'), '85');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Create expense/i }));
     await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ create_budget_entry: expect.objectContaining({ total_price: 85 }) })
+    // The legacy auto-budget mechanism is gone; the expense is created via the editor instead.
+    expect(onSave).not.toHaveBeenCalledWith(expect.objectContaining({ create_budget_entry: expect.anything() }));
+    await waitFor(() =>
+      expect(onOpenExpense).toHaveBeenCalledWith(
+        expect.objectContaining({ prefill: expect.objectContaining({ reservationId: 42 }) })
+      )
     );
   });
 

client/src/components/Planner/TransportModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useParams } from 'react-router-dom'
 import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Paperclip, FileText, X, ExternalLink, Link2, Plus, Trash2 } from 'lucide-react'
 import Modal from '../shared/Modal'
@@ -13,8 +13,11 @@ import { useAddonStore } from '../../store/addonStore'
 import { formatDate, splitReservationDateTime } from '../../utils/formatters'
 import { openFile } from '../../utils/fileDownload'
 import apiClient from '../../api/client'
-import type { Day, Reservation, ReservationEndpoint, TripFile } from '../../types'
+import type { Day, Reservation, ReservationEndpoint, TripFile, BudgetItem } from '../../types'
 import { parseReservationMetadata, orderedEndpoints } from '../../utils/flightLegs'
+import { BookingCostsSection } from './BookingCostsSection'
+import type { BookingExpenseRequest } from './BookingCostsSection.types'
+import { typeToCostCategory } from '@trek/shared'
 
 const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'] as const
 type TransportType = typeof TRANSPORT_TYPES[number]
@@ -105,8 +108,6 @@ const defaultForm = {
   arrival_time: '',
   confirmation_number: '',
   notes: '',
-  price: '',
-  budget_category: '',
   meta_airline: '',
   meta_flight_number: '',
   meta_train_number: '',
@@ -124,20 +125,20 @@ interface TransportModalProps {
   files?: TripFile[]
   onFileUpload?: (fd: FormData) => Promise<unknown>
   onFileDelete?: (fileId: number) => Promise<void>
+  onOpenExpense?: (req: BookingExpenseRequest) => void
 }
 
-export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId, files = [], onFileUpload, onFileDelete }: TransportModalProps) {
+export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId, files = [], onFileUpload, onFileDelete, onOpenExpense }: TransportModalProps) {
   const { t, locale } = useTranslation()
   const toast = useToast()
   const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
   const budgetItems = useTripStore(s => s.budgetItems)
+  const deleteBudgetItem = useTripStore(s => s.deleteBudgetItem)
   const loadFiles = useTripStore(s => s.loadFiles)
-  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 { id: tripId } = useParams<{ id: string }>()
+  // Set right before submitting when the user clicked "create/edit expense", so
+  // the post-save handler knows to open the Costs editor for the saved booking.
+  const expenseIntentRef = useRef<{ editItem?: BudgetItem; create?: boolean } | null>(null)
   const [form, setForm] = useState({ ...defaultForm })
   const [isSaving, setIsSaving] = useState(false)
   const [fromPick, setFromPick] = useState<EndpointPick>({})
@@ -177,8 +178,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         meta_train_number: meta.train_number || '',
         meta_platform: meta.platform || '',
         meta_seat: meta.seat || '',
-        price: meta.price || '',
-        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
       })
       if (type === 'flight') {
         const orderedEps = orderedEndpoints(reservation)
@@ -229,8 +228,8 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
 
   const set = (field: string, value: any) => setForm(prev => ({ ...prev, [field]: value }))
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault()
     if (!form.title.trim()) return
     setIsSaving(true)
     try {
@@ -289,11 +288,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         if (form.meta_platform) metadata.platform = form.meta_platform
         if (form.meta_seat) metadata.seat = form.meta_seat
       }
-      if (isBudgetEnabled) {
-        if (form.price) metadata.price = form.price
-        if (form.budget_category) metadata.budget_category = form.budget_category
-      }
-
       const startDate = startDay?.date ?? null
       const endDate = (endDay ?? startDay)?.date ?? null
       const endpoints: ReturnType<typeof endpointFromAirport>[] = []
@@ -334,11 +328,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         endpoints,
         needs_review: false,
       }
-      if (isBudgetEnabled) {
-        (payload as any).create_budget_entry = form.price && parseFloat(form.price) > 0
-          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
-          : { total_price: 0 }
-      }
       const saved = await onSave(payload)
       if (!reservation?.id && saved?.id && pendingFiles.length > 0 && onFileUpload) {
         for (const file of pendingFiles) {
@@ -349,6 +338,14 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
           await onFileUpload(fd)
         }
       }
+      // The user asked to create/edit the linked expense — open the Costs editor
+      // for the now-saved booking. Gated on saved?.id so a failed save doesn't.
+      const intent = expenseIntentRef.current
+      expenseIntentRef.current = null
+      if (intent && onOpenExpense && saved?.id) {
+        if (intent.editItem) onOpenExpense({ editItem: intent.editItem })
+        else onOpenExpense({ prefill: { reservationId: saved.id, name: form.title, category: typeToCostCategory(form.type) } })
+      }
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : t('common.unknownError'))
     } finally {
@@ -356,6 +353,12 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
     }
   }
 
+  const handleCreateExpense = () => { expenseIntentRef.current = { create: true }; handleSubmit() }
+  const handleEditExpense = (item: BudgetItem) => { expenseIntentRef.current = { editItem: item }; handleSubmit() }
+  const handleRemoveExpense = async (item: BudgetItem) => {
+    try { await deleteBudgetItem(Number(tripId), item.id) } catch { toast.error(t('common.unknownError')) }
+  }
+
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
@@ -712,38 +715,14 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
           </div>
         </div>
 
-        {/* Price + Budget Category */}
+        {/* Costs — create / view the expense linked to this booking */}
         {isBudgetEnabled && (
-          <>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{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.replace(',', '.')) }}
-                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
-                  placeholder="0.00"
-                  className={inputClass} />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{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 className="text-content-faint" style={{ fontSize: 11, marginTop: -4 }}>
-                {t('reservations.budgetHint')}
-              </div>
-            )}
-          </>
+          <BookingCostsSection
+            reservationId={reservation?.id ?? null}
+            onCreate={handleCreateExpense}
+            onEdit={handleEditExpense}
+            onRemove={handleRemoveExpense}
+          />
         )}
 
       </form>