feat: add file attachment support to TransportModal (issue #918)

Transports (flight/train/car/cruise) now support file attachments identical to the reservation modal — upload on create/edit, link existing files, and unlink. The Files tab and Assign File modal now differentiate between bookings and transports with separate sections and type-specific icons. Translations added for all 15 locales.
2026-06-21 06:11:45 +00:00 · 2026-04-28 23:59:55 +02:00
parent 0f63ced4a9
commit c4c5516af2
19 changed files with 586 additions and 58 deletions
@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom'
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
-import { Upload, Trash2, ExternalLink, Download, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Upload, Trash2, ExternalLink, Download, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check, ChevronLeft, ChevronRight, Plane, Train, Car, Ship } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { filesApi } from '../../api/client'
@@ -236,6 +236,15 @@ function AvatarChip({ name, avatarUrl, size = 20 }: { name: string; avatarUrl?:
  )
 }

+const TRANSPORT_TYPES = new Set(['flight', 'train', 'car', 'cruise'])
+
+function transportIcon(type: string) {
+  if (type === 'train') return Train
+  if (type === 'car') return Car
+  if (type === 'cruise') return Ship
+  return Plane
+}
+
 interface FileManagerProps {
  files?: TripFile[]
  onUpload: (fd: FormData) => Promise<any>
@@ -490,7 +499,9 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
              <SourceBadge key={p.id} icon={MapPin} label={`${t('files.sourcePlan')} · ${p.name}`} />
            ))}
            {linkedReservations.map(r => (
-              <SourceBadge key={r.id} icon={Ticket} label={`${t('files.sourceBooking')} · ${r.title || t('files.sourceBooking')}`} />
+              TRANSPORT_TYPES.has(r.type)
+                ? <SourceBadge key={r.id} icon={transportIcon(r.type)} label={`${t('files.sourceTransport')} · ${r.title || t('files.sourceTransport')}`} />
+                : <SourceBadge key={r.id} icon={Ticket} label={`${t('files.sourceBooking')} · ${r.title || t('files.sourceBooking')}`} />
            ))}
            {file.note_id && (
              <SourceBadge icon={StickyNote} label={t('files.sourceCollab') || 'Collab Notes'} />
@@ -673,52 +684,68 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                  </div>
                )

+                const bookingReservations = reservations.filter(r => !TRANSPORT_TYPES.has(r.type))
+                const transportReservations = reservations.filter(r => TRANSPORT_TYPES.has(r.type))
+
+                const reservationBtn = (r: Reservation) => {
+                  const isLinked = file.reservation_id === r.id || (file.linked_reservation_ids || []).includes(r.id)
+                  const Icon = TRANSPORT_TYPES.has(r.type) ? transportIcon(r.type) : Ticket
+                  return (
+                    <button key={r.id} onClick={async () => {
+                      if (isLinked) {
+                        if (file.reservation_id === r.id) {
+                          await handleAssign(file.id, { reservation_id: null })
+                        } else {
+                          try {
+                            const linksRes = await filesApi.getLinks(tripId, file.id)
+                            const link = (linksRes.links || []).find((l: any) => l.reservation_id === r.id)
+                            if (link) await filesApi.removeLink(tripId, file.id, link.id)
+                            refreshFiles()
+                          } catch {}
+                        }
+                      } else {
+                        if (!file.reservation_id) {
+                          await handleAssign(file.id, { reservation_id: r.id })
+                        } else {
+                          try {
+                            await filesApi.addLink(tripId, file.id, { reservation_id: r.id })
+                            refreshFiles()
+                          } catch {}
+                        }
+                      }
+                    }} style={{
+                      width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
+                      border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
+                      borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
+                      display: 'flex', alignItems: 'center', gap: 6,
+                    }}
+                      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                      onMouseLeave={e => e.currentTarget.style.background = isLinked ? 'var(--bg-hover)' : 'transparent'}>
+                      <Icon size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
+                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title || r.name}</span>
+                      {isLinked && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
+                    </button>
+                  )
+                }
+
                const bookingsSection = reservations.length > 0 && (
                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
-                      {t('files.assignBooking')}
-                    </div>
-                    {reservations.map(r => {
-                      const isLinked = file.reservation_id === r.id || (file.linked_reservation_ids || []).includes(r.id)
-                      return (
-                        <button key={r.id} onClick={async () => {
-                          if (isLinked) {
-                            // Unlink: if primary reservation_id, clear it; if via file_links, remove link
-                            if (file.reservation_id === r.id) {
-                              await handleAssign(file.id, { reservation_id: null })
-                            } else {
-                              try {
-                                const linksRes = await filesApi.getLinks(tripId, file.id)
-                                const link = (linksRes.links || []).find((l: any) => l.reservation_id === r.id)
-                                if (link) await filesApi.removeLink(tripId, file.id, link.id)
-                                refreshFiles()
-                              } catch {}
-                            }
-                          } else {
-                            // Link: if no primary, set it; otherwise use file_links
-                            if (!file.reservation_id) {
-                              await handleAssign(file.id, { reservation_id: r.id })
-                            } else {
-                              try {
-                                await filesApi.addLink(tripId, file.id, { reservation_id: r.id })
-                                refreshFiles()
-                              } catch {}
-                            }
-                          }
-                        }} style={{
-                          width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
-                          border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
-                          borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
-                          display: 'flex', alignItems: 'center', gap: 6,
-                        }}
-                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                          onMouseLeave={e => e.currentTarget.style.background = isLinked ? 'var(--bg-hover)' : 'transparent'}>
-                          <Ticket size={12} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
-                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title || r.name}</span>
-                          {isLinked && <Check size={14} style={{ marginLeft: 'auto', flexShrink: 0, color: 'var(--accent)' }} />}
-                        </button>
-                      )
-                    })}
+                    {bookingReservations.length > 0 && (
+                      <>
+                        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                          {t('files.assignBooking')}
+                        </div>
+                        {bookingReservations.map(reservationBtn)}
+                      </>
+                    )}
+                    {transportReservations.length > 0 && (
+                      <>
+                        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5, marginTop: bookingReservations.length > 0 ? 4 : 0 }}>
+                          {t('files.assignTransport')}
+                        </div>
+                        {transportReservations.map(reservationBtn)}
+                      </>
+                    )}
                  </div>
                )

@@ -0,0 +1,324 @@
+// FE-PLANNER-TRANSMODAL-001 to FE-PLANNER-TRANSMODAL-021
+import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useTripStore } from '../../store/tripStore';
+import { useAddonStore } from '../../store/addonStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import {
+  buildUser,
+  buildTrip,
+  buildDay,
+  buildReservation,
+  buildTripFile,
+} from '../../../tests/helpers/factories';
+import { TransportModal } from './TransportModal';
+
+vi.mock('react-router-dom', async (importActual) => {
+  const actual = await importActual<typeof import('react-router-dom')>();
+  return { ...actual, useParams: () => ({ id: '1' }) };
+});
+
+vi.mock('../shared/CustomTimePicker', () => ({
+  default: ({ value, onChange }: { value: string; onChange: (v: string) => void }) => (
+    <input data-testid="time-picker" type="text" value={value} onChange={e => onChange(e.target.value)} />
+  ),
+}));
+
+vi.mock('./AirportSelect', () => ({
+  default: ({ onChange }: { onChange: (a: any) => void }) => (
+    <input data-testid="airport-select" type="text" onChange={e => onChange({ iata: e.target.value, name: e.target.value, city: '', country: '', lat: 0, lng: 0, tz: 'UTC', icao: null })} />
+  ),
+}));
+
+vi.mock('./LocationSelect', () => ({
+  default: ({ onChange }: { onChange: (l: any) => void }) => (
+    <input data-testid="location-select" type="text" onChange={e => onChange({ name: e.target.value, lat: 0, lng: 0, address: null })} />
+  ),
+}));
+
+const defaultProps = {
+  isOpen: true,
+  onClose: vi.fn(),
+  onSave: vi.fn().mockResolvedValue(undefined),
+  reservation: null,
+  days: [],
+  selectedDayId: null,
+  files: [],
+  onFileUpload: vi.fn().mockResolvedValue(undefined),
+  onFileDelete: vi.fn().mockResolvedValue(undefined),
+};
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1 }), budgetItems: [] });
+  vi.clearAllMocks();
+});
+
+describe('TransportModal', () => {
+  // ── Rendering ──────────────────────────────────────────────────────────────
+
+  it('FE-PLANNER-TRANSMODAL-001: renders without crashing', () => {
+    render(<TransportModal {...defaultProps} />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-002: shows "Add transport" title for new transport', () => {
+    render(<TransportModal {...defaultProps} reservation={null} />);
+    expect(screen.getByText(/Add transport/i)).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-003: shows "Edit transport" title when editing', () => {
+    const res = buildReservation({ title: 'Paris Flight', type: 'flight' });
+    render(<TransportModal {...defaultProps} reservation={res} />);
+    expect(screen.getByText(/Edit transport/i)).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-004: title input is required — onSave not called with empty title', async () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    render(<TransportModal {...defaultProps} onSave={onSave} />);
+    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-005: all 4 transport type buttons are visible', () => {
+    render(<TransportModal {...defaultProps} />);
+    expect(screen.getByRole('button', { name: /^Flight$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Train$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Car$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Cruise$/i })).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-006: editing pre-fills title', () => {
+    const res = buildReservation({ title: 'LH123 Frankfurt', type: 'flight' });
+    render(<TransportModal {...defaultProps} reservation={res} />);
+    expect(screen.getByDisplayValue('LH123 Frankfurt')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-007: edit mode save button shows "Update"', () => {
+    const res = buildReservation({ title: 'My Train', type: 'train' });
+    render(<TransportModal {...defaultProps} reservation={res} />);
+    expect(screen.getByRole('button', { name: /^Update$/i })).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-008: Cancel button calls onClose', async () => {
+    const onClose = vi.fn();
+    render(<TransportModal {...defaultProps} onClose={onClose} />);
+    await userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-009: submitting valid flight calls onSave with correct type', async () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    render(<TransportModal {...defaultProps} onSave={onSave} />);
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'LH456');
+    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+    await waitFor(() => expect(onSave).toHaveBeenCalled());
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ title: 'LH456', type: 'flight' }));
+  });
+
+  it('FE-PLANNER-TRANSMODAL-010: switching to train type calls onSave with train type', async () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    render(<TransportModal {...defaultProps} onSave={onSave} />);
+    await userEvent.click(screen.getByRole('button', { name: /^Train$/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Eurostar');
+    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+    await waitFor(() => expect(onSave).toHaveBeenCalled());
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'train' }));
+  });
+
+  // ── Budget addon ─────────────────────────────────────────────────────────────
+
+  it('FE-PLANNER-TRANSMODAL-011: budget section visible when 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();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-012: budget section not shown when addon is disabled', () => {
+    render(<TransportModal {...defaultProps} />);
+    expect(screen.queryByPlaceholderText('0.00')).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-013: 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(<TransportModal {...defaultProps} onSave={onSave} />);
+    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 waitFor(() => expect(onSave).toHaveBeenCalled());
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ create_budget_entry: expect.objectContaining({ total_price: 85 }) })
+    );
+  });
+
+  // ── File attachment ───────────────────────────────────────────────────────────
+
+  it('FE-PLANNER-TRANSMODAL-014: attach file button rendered when onFileUpload provided', () => {
+    render(<TransportModal {...defaultProps} />);
+    expect(screen.getByRole('button', { name: /Attach file/i })).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-015: attach file button absent when onFileUpload is undefined', () => {
+    render(<TransportModal {...defaultProps} onFileUpload={undefined} />);
+    expect(screen.queryByRole('button', { name: /Attach file/i })).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-016: attached files shown for existing transport', () => {
+    const res = buildReservation({ id: 5, type: 'flight' });
+    const file = buildTripFile({ id: 1, trip_id: 1, original_name: 'boarding-pass.pdf' });
+    (file as any).reservation_id = 5;
+
+    render(<TransportModal {...defaultProps} reservation={res} files={[file]} />);
+    expect(screen.getByText('boarding-pass.pdf')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-017: pending file added for new transport on file input change', async () => {
+    render(<TransportModal {...defaultProps} reservation={null} />);
+
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const testFile = new File(['content'], 'itinerary.pdf', { type: 'application/pdf' });
+    fireEvent.change(fileInput, { target: { files: [testFile] } });
+
+    await waitFor(() => expect(screen.getByText('itinerary.pdf')).toBeInTheDocument());
+  });
+
+  it('FE-PLANNER-TRANSMODAL-018: file upload to existing transport calls onFileUpload with correct FormData', async () => {
+    const onFileUpload = vi.fn().mockResolvedValue(undefined);
+    const res = buildReservation({ id: 10, type: 'train', title: 'Eurostar' });
+
+    render(<TransportModal {...defaultProps} reservation={res} onFileUpload={onFileUpload} />);
+
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const testFile = new File(['content'], 'ticket.pdf', { type: 'application/pdf' });
+    fireEvent.change(fileInput, { target: { files: [testFile] } });
+
+    await waitFor(() => expect(onFileUpload).toHaveBeenCalled());
+    const [fd] = onFileUpload.mock.calls[0] as [FormData];
+    expect(fd.get('file')).toBeTruthy();
+    expect(fd.get('reservation_id')).toBe('10');
+  });
+
+  it('FE-PLANNER-TRANSMODAL-019: link existing file button appears when unattached files exist', () => {
+    const res = buildReservation({ id: 5, type: 'flight' });
+    const unattachedFile = buildTripFile({ id: 99, original_name: 'invoice.pdf' });
+
+    render(<TransportModal {...defaultProps} reservation={res} files={[unattachedFile]} />);
+    expect(screen.getByRole('button', { name: /Link existing file/i })).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-020: clicking "link existing file" shows file picker dropdown', async () => {
+    const res = buildReservation({ id: 5, type: 'flight' });
+    const unattachedFile = buildTripFile({ id: 99, original_name: 'invoice.pdf' });
+
+    render(<TransportModal {...defaultProps} reservation={res} files={[unattachedFile]} />);
+    await userEvent.click(screen.getByRole('button', { name: /Link existing file/i }));
+    expect(screen.getByText('invoice.pdf')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-021: clicking file in picker links it and closes picker', async () => {
+    server.use(
+      http.post('/api/trips/1/files/99/link', () => HttpResponse.json({ success: true })),
+      http.get('/api/trips/1/files', () => HttpResponse.json({ files: [] })),
+    );
+
+    const res = buildReservation({ id: 5, type: 'flight' });
+    const unattachedFile = buildTripFile({ id: 99, original_name: 'invoice.pdf' });
+
+    render(<TransportModal {...defaultProps} reservation={res} files={[unattachedFile]} />);
+    await userEvent.click(screen.getByRole('button', { name: /Link existing file/i }));
+    await userEvent.click(screen.getByText('invoice.pdf'));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: /Link existing file/i })).not.toBeInTheDocument();
+    });
+  });
+
+  it('FE-PLANNER-TRANSMODAL-022: removing pending file removes it from list', async () => {
+    render(<TransportModal {...defaultProps} reservation={null} />);
+
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const testFile = new File(['content'], 'draft.pdf', { type: 'application/pdf' });
+    fireEvent.change(fileInput, { target: { files: [testFile] } });
+
+    await waitFor(() => expect(screen.getByText('draft.pdf')).toBeInTheDocument());
+
+    const pendingFileRow = screen.getByText('draft.pdf').closest('div')!;
+    const removeBtn = pendingFileRow.querySelector('button')!;
+    await userEvent.click(removeBtn);
+
+    await waitFor(() => expect(screen.queryByText('draft.pdf')).not.toBeInTheDocument());
+  });
+
+  it('FE-PLANNER-TRANSMODAL-023: clicking attach file button triggers file input click', async () => {
+    render(<TransportModal {...defaultProps} />);
+    const attachBtn = screen.getByRole('button', { name: /Attach file/i });
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const clickSpy = vi.spyOn(fileInput, 'click').mockImplementation(() => {});
+    await userEvent.click(attachBtn);
+    expect(clickSpy).toHaveBeenCalled();
+    clickSpy.mockRestore();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-024: unlinking a linked file removes it from attached list', async () => {
+    server.use(
+      http.post('/api/trips/1/files/42/link', () => HttpResponse.json({ success: true })),
+      http.get('/api/trips/1/files/42/links', () => HttpResponse.json({ links: [{ id: 1, reservation_id: 7 }] })),
+      http.delete('/api/trips/1/files/42/link/1', () => HttpResponse.json({ success: true })),
+      http.get('/api/trips/1/files', () => HttpResponse.json({ files: [] })),
+    );
+
+    const res = buildReservation({ id: 7, type: 'car' });
+    const looseFile = buildTripFile({ id: 42, original_name: 'rental-agreement.pdf' });
+
+    render(<TransportModal {...defaultProps} reservation={res} files={[looseFile]} />);
+
+    await userEvent.click(screen.getByRole('button', { name: /Link existing file/i }));
+    await waitFor(() => expect(screen.getByText('rental-agreement.pdf')).toBeInTheDocument());
+    await userEvent.click(screen.getByText('rental-agreement.pdf'));
+
+    await waitFor(() =>
+      expect(screen.queryByRole('button', { name: /Link existing file/i })).not.toBeInTheDocument()
+    );
+
+    const fileRow = screen.getByText('rental-agreement.pdf').closest('div')!;
+    const unlinkBtn = fileRow.querySelector('button[type="button"]')!;
+    await userEvent.click(unlinkBtn);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Link existing file/i })).toBeInTheDocument();
+    });
+  });
+
+  it('FE-PLANNER-TRANSMODAL-025: pending files flushed after saving new transport', async () => {
+    const savedReservation = buildReservation({ id: 99, type: 'flight' });
+    const onSave = vi.fn().mockResolvedValue(savedReservation);
+    const onFileUpload = vi.fn().mockResolvedValue(undefined);
+
+    render(<TransportModal {...defaultProps} onSave={onSave} onFileUpload={onFileUpload} reservation={null} />);
+
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const testFile = new File(['content'], 'boarding.pdf', { type: 'application/pdf' });
+    fireEvent.change(fileInput, { target: { files: [testFile] } });
+    await waitFor(() => expect(screen.getByText('boarding.pdf')).toBeInTheDocument());
+
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'LH001');
+    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+
+    await waitFor(() => expect(onFileUpload).toHaveBeenCalled());
+    const [fd] = onFileUpload.mock.calls[0] as [FormData];
+    expect(fd.get('reservation_id')).toBe('99');
+    expect(fd.get('file')).toBeTruthy();
+  });
+});
@@ -1,5 +1,6 @@
-import { useState, useEffect, useMemo } from 'react'
-import { Plane, Train, Car, Ship } from 'lucide-react'
+import { useState, useEffect, useMemo, useRef } from 'react'
+import { useParams } from 'react-router-dom'
+import { Plane, Train, Car, Ship, Paperclip, FileText, X, ExternalLink, Link2 } from 'lucide-react'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import CustomTimePicker from '../shared/CustomTimePicker'
@@ -10,7 +11,9 @@ import { useToast } from '../shared/Toast'
 import { useTripStore } from '../../store/tripStore'
 import { useAddonStore } from '../../store/addonStore'
 import { formatDate } from '../../utils/formatters'
-import type { Day, Reservation, ReservationEndpoint } from '../../types'
+import { openFile } from '../../utils/fileDownload'
+import apiClient from '../../api/client'
+import type { Day, Reservation, ReservationEndpoint, TripFile } from '../../types'

 const TRANSPORT_TYPES = ['flight', 'train', 'car', 'cruise'] as const
 type TransportType = typeof TRANSPORT_TYPES[number]
@@ -89,26 +92,36 @@ const defaultForm = {
 interface TransportModalProps {
  isOpen: boolean
  onClose: () => void
-  onSave: (data: Record<string, any>) => Promise<void>
+  onSave: (data: Record<string, any>) => Promise<Reservation | undefined>
  reservation: Reservation | null
  days: Day[]
  selectedDayId: number | null
+  files?: TripFile[]
+  onFileUpload?: (fd: FormData) => Promise<void>
+  onFileDelete?: (fileId: number) => Promise<void>
 }

-export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId }: TransportModalProps) {
+export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId, files = [], onFileUpload, onFileDelete }: TransportModalProps) {
  const { t, locale } = useTranslation()
  const toast = useToast()
  const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
  const budgetItems = useTripStore(s => s.budgetItems)
+  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 }>()
  const [form, setForm] = useState({ ...defaultForm })
  const [isSaving, setIsSaving] = useState(false)
  const [fromPick, setFromPick] = useState<EndpointPick>({})
  const [toPick, setToPick] = useState<EndpointPick>({})
+  const [uploadingFile, setUploadingFile] = useState(false)
+  const [pendingFiles, setPendingFiles] = useState<File[]>([])
+  const [showFilePicker, setShowFilePicker] = useState(false)
+  const [linkedFileIds, setLinkedFileIds] = useState<number[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (!isOpen) return
@@ -222,7 +235,16 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
          : { total_price: 0 }
      }
-      await onSave(payload)
+      const saved = await onSave(payload)
+      if (!reservation?.id && saved?.id && pendingFiles.length > 0 && onFileUpload) {
+        for (const file of pendingFiles) {
+          const fd = new FormData()
+          fd.append('file', file)
+          fd.append('reservation_id', String(saved.id))
+          fd.append('description', form.title)
+          await onFileUpload(fd)
+        }
+      }
    } catch (err: unknown) {
      toast.error(err instanceof Error ? err.message : t('common.unknownError'))
    } finally {
@@ -230,6 +252,38 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
    }
  }

+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    if (reservation?.id) {
+      setUploadingFile(true)
+      try {
+        const fd = new FormData()
+        fd.append('file', file)
+        fd.append('reservation_id', String(reservation.id))
+        fd.append('description', reservation.title)
+        await onFileUpload!(fd)
+        toast.success(t('reservations.toast.fileUploaded'))
+      } catch {
+        toast.error(t('reservations.toast.uploadError'))
+      } finally {
+        setUploadingFile(false)
+        e.target.value = ''
+      }
+    } else {
+      setPendingFiles(prev => [...prev, file])
+      e.target.value = ''
+    }
+  }
+
+  const attachedFiles = reservation?.id
+    ? files.filter(f =>
+        f.reservation_id === reservation.id ||
+        linkedFileIds.includes(f.id) ||
+        (f.linked_reservation_ids && f.linked_reservation_ids.includes(reservation.id))
+      )
+    : []
+
  const inputStyle = {
    width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10,
    padding: '8px 12px', fontSize: 13, fontFamily: 'inherit',
@@ -444,6 +498,94 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
            style={{ ...inputStyle, resize: 'none', lineHeight: 1.5 }} />
        </div>

+        {/* Files */}
+        <div>
+          <label style={labelStyle}>{t('files.title')}</label>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            {attachedFiles.map(f => (
+              <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
+                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
+                <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
+                <a href="#" onClick={(e) => { e.preventDefault(); openFile(f.url).catch(() => {}) }} style={{ color: 'var(--text-faint)', display: 'flex', flexShrink: 0, cursor: 'pointer' }}><ExternalLink size={11} /></a>
+                <button type="button" onClick={async () => {
+                  if (f.reservation_id === reservation?.id) {
+                    try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch {}
+                  }
+                  try {
+                    const linksRes = await apiClient.get(`/trips/${tripId}/files/${f.id}/links`)
+                    const link = (linksRes.data.links || []).find((l: any) => l.reservation_id === reservation?.id)
+                    if (link) await apiClient.delete(`/trips/${tripId}/files/${f.id}/link/${link.id}`)
+                  } catch {}
+                  setLinkedFileIds(prev => prev.filter(id => id !== f.id))
+                  if (tripId) loadFiles(tripId)
+                }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
+                  <X size={11} />
+                </button>
+              </div>
+            ))}
+            {pendingFiles.map((f, i) => (
+              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
+                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
+                <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
+                <button type="button" onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))}
+                  style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
+                  <X size={11} />
+                </button>
+              </div>
+            ))}
+            <input ref={fileInputRef} type="file" accept=".pdf,.doc,.docx,.txt,image/*" style={{ display: 'none' }} onChange={handleFileChange} />
+            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+              {onFileUpload && <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} style={{
+                display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
+                border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
+                fontSize: 11, color: 'var(--text-faint)', cursor: uploadingFile ? 'default' : 'pointer', fontFamily: 'inherit',
+              }}>
+                <Paperclip size={11} />
+                {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
+              </button>}
+              {reservation?.id && files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).length > 0 && (
+                <div style={{ position: 'relative' }}>
+                  <button type="button" onClick={() => setShowFilePicker(v => !v)} style={{
+                    display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
+                    border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
+                    fontSize: 11, color: 'var(--text-faint)', cursor: 'pointer', fontFamily: 'inherit',
+                  }}>
+                    <Link2 size={11} /> {t('reservations.linkExisting')}
+                  </button>
+                  {showFilePicker && (
+                    <div style={{
+                      position: 'absolute', bottom: '100%', left: 0, marginBottom: 4, zIndex: 50,
+                      background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+                      boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 220, maxHeight: 200, overflowY: 'auto',
+                    }}>
+                      {files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).map(f => (
+                        <button key={f.id} type="button" onClick={async () => {
+                          try {
+                            await apiClient.post(`/trips/${tripId}/files/${f.id}/link`, { reservation_id: reservation.id })
+                            setLinkedFileIds(prev => [...prev, f.id])
+                            setShowFilePicker(false)
+                            if (tripId) loadFiles(tripId)
+                          } catch {}
+                        }}
+                          style={{
+                            display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px',
+                            background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, fontFamily: 'inherit',
+                            color: 'var(--text-secondary)', borderRadius: 7, textAlign: 'left',
+                          }}
+                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+                          onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+                          <FileText size={12} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
        {/* Price + Budget Category */}
        {isBudgetEnabled && (
          <>
@@ -1249,6 +1249,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
  'files.toast.deleteError': 'فشل حذف الملف',
  'files.sourcePlan': 'خطة اليوم',
  'files.sourceBooking': 'الحجز',
+  'files.sourceTransport': 'النقل',
  'files.attach': 'إرفاق',
  'files.pasteHint': 'يمكنك أيضًا لصق الصور من الحافظة (Ctrl+V)',
  'files.trash': 'سلة المهملات',
@@ -1261,6 +1262,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
  'files.assignTitle': 'إسناد ملف',
  'files.assignPlace': 'المكان',
  'files.assignBooking': 'الحجز',
+  'files.assignTransport': 'النقل',
  'files.unassigned': 'غير مسند',
  'files.unlink': 'إزالة الرابط',
  'files.toast.trashed': 'تم النقل إلى سلة المهملات',
@@ -1218,6 +1218,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
  'files.toast.deleteError': 'Falha ao excluir arquivo',
  'files.sourcePlan': 'Plano do dia',
  'files.sourceBooking': 'Reserva',
+  'files.sourceTransport': 'Transporte',
  'files.attach': 'Anexar',
  'files.pasteHint': 'Você também pode colar imagens da área de transferência (Ctrl+V)',
  'files.trash': 'Lixeira',
@@ -1230,6 +1231,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
  'files.assignTitle': 'Atribuir arquivo',
  'files.assignPlace': 'Lugar',
  'files.assignBooking': 'Reserva',
+  'files.assignTransport': 'Transporte',
  'files.unassigned': 'Não atribuído',
  'files.unlink': 'Remover vínculo',
  'files.toast.trashed': 'Movido para a lixeira',
@@ -1247,6 +1247,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
  'files.toast.deleteError': 'Nepodařilo se smazat soubor',
  'files.sourcePlan': 'Denní plán',
  'files.sourceBooking': 'Rezervace',
+  'files.sourceTransport': 'Doprava',
  'files.attach': 'Přiložit',
  'files.pasteHint': 'Můžete také vložit obrázek ze schránky (Ctrl+V)',
  'files.trash': 'Koš',
@@ -1259,6 +1260,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
  'files.assignTitle': 'Přiřadit soubor',
  'files.assignPlace': 'Místo',
  'files.assignBooking': 'Rezervace',
+  'files.assignTransport': 'Doprava',
  'files.unassigned': 'Nepřiřazeno',
  'files.unlink': 'Zrušit propojení',
  'files.toast.trashed': 'Přesunuto do koše',
@@ -1251,6 +1251,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
  'files.toast.deleteError': 'Fehler beim Löschen der Datei',
  'files.sourcePlan': 'Tagesplan',
  'files.sourceBooking': 'Buchung',
+  'files.sourceTransport': 'Transport',
  'files.attach': 'Anhängen',
  'files.pasteHint': 'Du kannst auch Bilder aus der Zwischenablage einfügen (Strg+V)',
  'files.trash': 'Papierkorb',
@@ -1263,6 +1264,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
  'files.assignTitle': 'Datei zuweisen',
  'files.assignPlace': 'Ort',
  'files.assignBooking': 'Buchung',
+  'files.assignTransport': 'Transport',
  'files.unassigned': 'Nicht zugewiesen',
  'files.unlink': 'Verknüpfung entfernen',
  'files.toast.trashed': 'In den Papierkorb verschoben',
@@ -1322,6 +1322,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
  'files.toast.deleteError': 'Failed to delete file',
  'files.sourcePlan': 'Day Plan',
  'files.sourceBooking': 'Booking',
+  'files.sourceTransport': 'Transport',
  'files.attach': 'Attach',
  'files.pasteHint': 'You can also paste images from clipboard (Ctrl+V)',
  'files.trash': 'Trash',
@@ -1334,6 +1335,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
  'files.assignTitle': 'Assign File',
  'files.assignPlace': 'Place',
  'files.assignBooking': 'Booking',
+  'files.assignTransport': 'Transport',
  'files.unassigned': 'Unassigned',
  'files.unlink': 'Remove link',
  'files.toast.trashed': 'Moved to trash',
@@ -1195,6 +1195,7 @@ const es: Record<string, string> = {
  'files.toast.deleteError': 'No se pudo eliminar el archivo',
  'files.sourcePlan': 'Plan diario',
  'files.sourceBooking': 'Reserva',
+  'files.sourceTransport': 'Transporte',
  'files.attach': 'Adjuntar',
  'files.pasteHint': 'También puedes pegar imágenes desde el portapapeles (Ctrl+V)',

@@ -1682,6 +1683,7 @@ const es: Record<string, string> = {
  'files.assignTitle': 'Asignar archivo',
  'files.assignPlace': 'Lugar',
  'files.assignBooking': 'Reserva',
+  'files.assignTransport': 'Transporte',
  'files.unassigned': 'Sin asignar',
  'files.unlink': 'Eliminar vínculo',
  'files.noteLabel': 'Nota',
@@ -1245,6 +1245,7 @@ const fr: Record<string, string> = {
  'files.toast.deleteError': 'Impossible de supprimer le fichier',
  'files.sourcePlan': 'Plan du jour',
  'files.sourceBooking': 'Réservation',
+  'files.sourceTransport': 'Transport',
  'files.attach': 'Joindre',
  'files.pasteHint': 'Vous pouvez aussi coller des images depuis le presse-papiers (Ctrl+V)',
  'files.trash': 'Corbeille',
@@ -1257,6 +1258,7 @@ const fr: Record<string, string> = {
  'files.assignTitle': 'Assigner le fichier',
  'files.assignPlace': 'Lieu',
  'files.assignBooking': 'Réservation',
+  'files.assignTransport': 'Transport',
  'files.unassigned': 'Non attribué',
  'files.unlink': 'Supprimer le lien',
  'files.toast.trashed': 'Déplacé dans la corbeille',
@@ -1246,6 +1246,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
  'files.toast.deleteError': 'Nem sikerült törölni a fájlt',
  'files.sourcePlan': 'Napi terv',
  'files.sourceBooking': 'Foglalás',
+  'files.sourceTransport': 'Közlekedés',
  'files.attach': 'Csatolás',
  'files.pasteHint': 'Képeket a vágólapról is beillesztheted (Ctrl+V)',
  'files.trash': 'Kuka',
@@ -1258,6 +1259,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
  'files.assignTitle': 'Fájl hozzárendelése',
  'files.assignPlace': 'Hely',
  'files.assignBooking': 'Foglalás',
+  'files.assignTransport': 'Közlekedés',
  'files.unassigned': 'Nincs hozzárendelve',
  'files.unlink': 'Kapcsolat eltávolítása',
  'files.toast.trashed': 'Kukába helyezve',
@@ -1306,6 +1306,7 @@ const id: Record<string, string | { name: string; category: string }[]> = {
  'files.toast.deleteError': 'Gagal menghapus file',
  'files.sourcePlan': 'Rencana Harian',
  'files.sourceBooking': 'Pemesanan',
+  'files.sourceTransport': 'Transportasi',
  'files.attach': 'Lampirkan',
  'files.pasteHint': 'Kamu juga bisa menempel gambar dari clipboard (Ctrl+V)',
  'files.trash': 'Sampah',
@@ -1318,6 +1319,7 @@ const id: Record<string, string | { name: string; category: string }[]> = {
  'files.assignTitle': 'Tugaskan File',
  'files.assignPlace': 'Tempat',
  'files.assignBooking': 'Pemesanan',
+  'files.assignTransport': 'Transportasi',
  'files.unassigned': 'Tidak ditugaskan',
  'files.unlink': 'Hapus tautan',
  'files.toast.trashed': 'Dipindahkan ke sampah',
@@ -1246,6 +1246,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
  'files.toast.deleteError': 'Impossibile eliminare il file',
  'files.sourcePlan': 'Programma giornaliero',
  'files.sourceBooking': 'Prenotazione',
+  'files.sourceTransport': 'Trasporto',
  'files.attach': 'Allega',
  'files.pasteHint': 'Puoi anche incollare immagini dagli appunti (Ctrl+V)',
  'files.trash': 'Cestino',
@@ -1258,6 +1259,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
  'files.assignTitle': 'Assegna file',
  'files.assignPlace': 'Luogo',
  'files.assignBooking': 'Prenotazione',
+  'files.assignTransport': 'Trasporto',
  'files.unassigned': 'Non assegnato',
  'files.unlink': 'Rimuovi collegamento',
  'files.toast.trashed': 'Spostato nel cestino',
@@ -1245,6 +1245,7 @@ const nl: Record<string, string> = {
  'files.toast.deleteError': 'Bestand verwijderen mislukt',
  'files.sourcePlan': 'Dagplan',
  'files.sourceBooking': 'Boeking',
+  'files.sourceTransport': 'Transport',
  'files.attach': 'Bijvoegen',
  'files.pasteHint': 'Je kunt ook afbeeldingen plakken vanuit het klembord (Ctrl+V)',
  'files.trash': 'Prullenbak',
@@ -1257,6 +1258,7 @@ const nl: Record<string, string> = {
  'files.assignTitle': 'Bestand toewijzen',
  'files.assignPlace': 'Plaats',
  'files.assignBooking': 'Boeking',
+  'files.assignTransport': 'Transport',
  'files.unassigned': 'Niet toegewezen',
  'files.unlink': 'Koppeling verwijderen',
  'files.toast.trashed': 'Naar prullenbak verplaatst',
@@ -1197,6 +1197,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
  'files.toast.deleteError': 'Nie udało się usunąć pliku',
  'files.sourcePlan': 'Plan dni',
  'files.sourceBooking': 'Rezerwacje',
+  'files.sourceTransport': 'Transport',
  'files.attach': 'Załącz',
  'files.pasteHint': 'Możesz również wkleić obrazki ze schowka (Ctrl+V)',
  'files.trash': 'Kosz',
@@ -1209,6 +1210,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
  'files.assignTitle': 'Przypisz plik',
  'files.assignPlace': 'Miejsce',
  'files.assignBooking': 'Rezerwacja',
+  'files.assignTransport': 'Transport',
  'files.unassigned': 'Nieprzypisane',
  'files.unlink': 'Usuń link',
  'files.toast.trashed': 'Przeniesiono do kosza',
@@ -1245,6 +1245,7 @@ const ru: Record<string, string> = {
  'files.toast.deleteError': 'Не удалось удалить файл',
  'files.sourcePlan': 'План дня',
  'files.sourceBooking': 'Бронирование',
+  'files.sourceTransport': 'Транспорт',
  'files.attach': 'Прикрепить',
  'files.pasteHint': 'Также можно вставить изображения из буфера обмена (Ctrl+V)',
  'files.trash': 'Корзина',
@@ -1257,6 +1258,7 @@ const ru: Record<string, string> = {
  'files.assignTitle': 'Назначить файл',
  'files.assignPlace': 'Место',
  'files.assignBooking': 'Бронирование',
+  'files.assignTransport': 'Транспорт',
  'files.unassigned': 'Не назначен',
  'files.unlink': 'Удалить связь',
  'files.toast.trashed': 'Перемещено в корзину',
@@ -1245,6 +1245,7 @@ const zh: Record<string, string> = {
  'files.toast.deleteError': '删除文件失败',
  'files.sourcePlan': '日程计划',
  'files.sourceBooking': '预订',
+  'files.sourceTransport': '交通',
  'files.attach': '附加',
  'files.pasteHint': '也可以从剪贴板粘贴图片 (Ctrl+V)',
  'files.trash': '回收站',
@@ -1257,6 +1258,7 @@ const zh: Record<string, string> = {
  'files.assignTitle': '分配文件',
  'files.assignPlace': '地点',
  'files.assignBooking': '预订',
+  'files.assignTransport': '交通',
  'files.unassigned': '未分配',
  'files.unlink': '移除关联',
  'files.toast.trashed': '已移至回收站',
@@ -1305,6 +1305,7 @@ const zhTw: Record<string, string> = {
  'files.toast.deleteError': '刪除檔案失敗',
  'files.sourcePlan': '日程計劃',
  'files.sourceBooking': '預訂',
+  'files.sourceTransport': '交通',
  'files.attach': '附加',
  'files.pasteHint': '也可以從剪貼簿貼上圖片 (Ctrl+V)',
  'files.trash': '回收站',
@@ -1317,6 +1318,7 @@ const zhTw: Record<string, string> = {
  'files.assignTitle': '分配檔案',
  'files.assignPlace': '地點',
  'files.assignBooking': '預訂',
+  'files.assignTransport': '交通',
  'files.unassigned': '未分配',
  'files.unlink': '移除關聯',
  'files.toast.trashed': '已移至回收站',
@@ -666,15 +666,20 @@ export default function TripPlannerPage(): React.ReactElement | null {
  const handleSaveTransport = async (data) => {
    try {
      if (editingTransport) {
-        await tripActions.updateReservation(tripId, editingTransport.id, data)
+        const r = await tripActions.updateReservation(tripId, editingTransport.id, data)
        toast.success(t('trip.toast.reservationUpdated'))
+        setShowTransportModal(false)
+        setEditingTransport(null)
+        setTransportModalDayId(null)
+        return r
      } else {
-        await tripActions.addReservation(tripId, data)
+        const r = await tripActions.addReservation(tripId, data)
        toast.success(t('trip.toast.reservationAdded'))
+        setShowTransportModal(false)
+        setEditingTransport(null)
+        setTransportModalDayId(null)
+        return r
      }
-      setShowTransportModal(false)
-      setEditingTransport(null)
-      setTransportModalDayId(null)
    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
  }

@@ -1194,7 +1199,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
      <TripFormModal isOpen={showTripForm} onClose={() => setShowTripForm(false)} onSave={async (data) => { await tripActions.updateTrip(tripId, data); toast.success(t('trip.toast.tripUpdated')) }} trip={trip} />
      <TripMembersModal isOpen={showMembersModal} onClose={() => setShowMembersModal(false)} tripId={tripId} tripTitle={trip?.title} />
      <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null); setBookingForAssignmentId(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} defaultAssignmentId={bookingForAssignmentId} />
-      {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} />}
+      {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} />}
      <ConfirmDialog
        isOpen={!!deletePlaceId}
        onClose={() => setDeletePlaceId(null)}