diff --git a/client/src/components/PDF/TripPDF.tsx b/client/src/components/PDF/TripPDF.tsx index 91da01d..2ef5fdc 100644 --- a/client/src/components/PDF/TripPDF.tsx +++ b/client/src/components/PDF/TripPDF.tsx @@ -238,51 +238,39 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor ` }).join('') - const accommodationsForDay = accommodations.accommodations?.filter(a => + const accommodationsForDay = (accommodations.accommodations || []).filter(a => days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id) - ).sort((a, b) => a.start_day_id - b.start_day_id); + ).sort((a, b) => a.start_day_id - b.start_day_id) - //Const icons for accommodation actions and details - const ICON_ACC_CHECKIN = accommodationIconSvg('checkin'); - const ICON_ACC_CHECKOUT = accommodationIconSvg('checkout'); - const ICON_ACC_LOCATION = accommodationIconSvg('location'); - const ICON_ACC_NOTE = accommodationIconSvg('note'); - const ICON_ACC_CONFIRMATION = accommodationIconSvg('confirmation'); - const ICON_ACC_ACCOMMODATION = accommodationIconSvg('accommodation'); - - const accommodationDetails = accommodationsForDay.map(item => { - - const isCheckIn = day.id === item.start_day_id; - const isCheckOut = day.id === item.end_day_id; - const accomoAction = isCheckIn ? tr('reservations.meta.checkIn') - : isCheckOut ? tr('reservations.meta.checkOut') - : tr('reservations.meta.linkAccommodation') - - const accomoEmoji = isCheckIn ? ICON_ACC_CHECKIN - : isCheckOut ? ICON_ACC_CHECKOUT - : ICON_ACC_ACCOMMODATION - - const accomoTime = isCheckIn ? item.check_in || 'N/A' - : isCheckOut ? item.check_out || 'N/A' - : '' + const accommodationDetails = accommodationsForDay.map(item => { + const isCheckIn = day.id === item.start_day_id + const isCheckOut = day.id === item.end_day_id + const actionLabel = isCheckIn ? tr('reservations.meta.checkIn') + : isCheckOut ? tr('reservations.meta.checkOut') + : tr('reservations.meta.linkAccommodation') + const actionIcon = isCheckIn ? accommodationIconSvg('checkin') + : isCheckOut ? accommodationIconSvg('checkout') + : accommodationIconSvg('accommodation') + const timeStr = isCheckIn ? (item.check_in || '') + : isCheckOut ? (item.check_out || '') + : '' return ` -
-
${accomoEmoji} ${escHtml(accomoAction)}
- ${accomoTime ? `
${accomoEmoji} ${accomoTime}
` : ''} +
+
${actionIcon} ${escHtml(actionLabel)}
+ ${timeStr ? `
${accommodationIconSvg('checkin')} ${escHtml(timeStr)}
` : ''} +
${accommodationIconSvg('accommodation')} ${escHtml(item.place_name)}
+ ${item.place_address ? `
${accommodationIconSvg('location')} ${escHtml(item.place_address)}
` : ''} + ${item.notes ? `
${accommodationIconSvg('note')} ${escHtml(item.notes)}
` : ''} + ${isCheckIn && item.confirmation ? `
${accommodationIconSvg('confirmation')} ${escHtml(item.confirmation)}
` : ''} +
` + }).join('') -
${ICON_ACC_ACCOMMODATION} ${escHtml(item.place_name)}
- ${item.place_address ? `
${ICON_ACC_LOCATION} ${escHtml(item.place_address)}
` : ''} - ${item.notes ? `
${ICON_ACC_NOTE} ${escHtml(item.notes)}
` : ''} - ${isCheckIn && item.confirmation ? `
${ICON_ACC_CONFIRMATION} ${escHtml(item.confirmation)}
` : ''} -
- ` - }).join(''); - - const accommodationsHtml = accommodationDetails ? - `
-
${accommodationDetails}
-
` : ''; + const accommodationsHtml = accommodationsForDay.length > 0 + ? `
+
${accommodationDetails}
+
` + : '' return `
@@ -377,38 +365,20 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor .day-body { padding: 12px 28px 6px; } /* accommodation info */ - .day-accommodations-overview { font-size: 12px; } - .day-accommodations { display: flex; flex-direction: row; justify-content: space-between; } + .day-accommodations-overview { font-size: 12px; } + .day-accommodations { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; } .day-accommodations.single { justify-content: center; } - - .day-accommodation { - width: 50%; - margin:10px; - padding:10px; - border:2px solid #e2e8f0; - border-radius: 12px; - justify-content: center; - display: flex; - flex-direction: column; + .day-accommodation { + flex: 1 1 45%; min-width: 200px; margin: 4px 0; padding: 10px; + border: 2px solid #e2e8f0; border-radius: 12px; + display: flex; flex-direction: column; } - .day-accommodation-title { - font-size: 18px; - font-weight: 600; - text-align: center; - margin-bottom: 4px; - align-self: center; + font-size: 16px; font-weight: 600; text-align: center; + margin-bottom: 4px; align-self: center; } + .accommodation-center-icon { display: flex; align-items: center; gap: 4px; } - .accommodation-center-icon { - display: flex; - align-items: center; - } - - .accommodation-icon { - margin-right: 4px; - } - /* ── Place card ────────────────────────────────── */ .place-card {