fix(reservations): show day date range on accommodation cards

Hotel reservations store their date range in day_accommodations rather
than on reservation_time, so the card date block never rendered. Pull
accommodation_start_day_id / accommodation_end_day_id from the SQL join
and surface them on the card.

Also apply Maurice's badge-pill pattern (day name + localized date pill)
to the day-range display, consistent with the modal day selectors.

client/src/components/Planner/ReservationsPanel.tsx

@@ -112,17 +112,30 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
 
   const TRANSPORT_TYPES_SET = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
   const isTransportType = TRANSPORT_TYPES_SET.has(r.type)
-  const startDay = r.day_id ? days.find(d => d.id === r.day_id) : undefined
+  const isHotel = r.type === 'hotel'
-  const endDay = r.end_day_id ? days.find(d => d.id === r.end_day_id) : undefined
+  const startDay = r.day_id ? days.find(d => d.id === r.day_id)
-  const dayLabel = (day: typeof startDay): string => {
+    : (isHotel && r.accommodation_start_day_id) ? days.find(d => d.id === r.accommodation_start_day_id)
-    if (!day) return ''
+    : undefined
-    const base = day.title || t('dayplan.dayN', { n: day.day_number })
+  const endDay = r.end_day_id ? days.find(d => d.id === r.end_day_id)
-    if (day.date) {
+    : (isHotel && r.accommodation_end_day_id) ? days.find(d => d.id === r.accommodation_end_day_id)
-      const d = new Date(day.date + 'T00:00:00Z')
+    : undefined
-      const dateStr = d.toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+  const DayLabel = ({ day }: { day: typeof startDay }) => {
-      return `${base} · ${dateStr}`
+    if (!day) return null
-    }
+    const name = day.title || t('dayplan.dayN', { n: day.day_number })
-    return base
+    const badge = day.date
+      ? new Date(day.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+      : null
+    return (
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+        <span>{name}</span>
+        {badge && (
+          <span style={{
+            fontSize: 10, fontWeight: 600, color: 'var(--text-faint)',
+            background: 'var(--bg-secondary)', padding: '1px 6px', borderRadius: 999,
+          }}>{badge}</span>
+        )}
+      </span>
+    )
   }
 
   return (
@@ -202,12 +215,15 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
 
       {/* Body */}
       <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
-        {/* Day label for transport reservations linked to a day */}
+        {/* Day label for transport/hotel reservations linked to days */}
-        {isTransportType && startDay && (
+        {(isTransportType || isHotel) && startDay && (
           <div>
             <div style={fieldLabelStyle}>{t('reservations.date')}</div>
-            <div style={{ ...fieldValueStyle, textAlign: 'center' }}>
+            <div style={{ ...fieldValueStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, flexWrap: 'wrap' }}>
-              {dayLabel(startDay)}{endDay && endDay.id !== startDay.id ? ` – ${dayLabel(endDay)}` : ''}
+              <DayLabel day={startDay} />
+              {endDay && endDay.id !== startDay.id && (
+                <><span style={{ color: 'var(--text-faint)' }}>–</span><DayLabel day={endDay} /></>
+              )}
             </div>
           </div>
         )}

client/src/types.ts

@@ -171,6 +171,8 @@ export interface Reservation {
   place_id?: number | null
   assignment_id?: number | null
   accommodation_id?: number | null
+  accommodation_start_day_id?: number | null
+  accommodation_end_day_id?: number | null
   day_plan_position?: number | null
   metadata?: Record<string, string> | string | null
   needs_review?: number

server/src/services/reservationService.ts

@@ -57,7 +57,8 @@ const saveEndpoints = db.transaction((reservationId: number, endpoints: Endpoint
 export function listReservations(tripId: string | number) {
   const reservations = db.prepare(`
     SELECT r.*, d.day_number, p.name as place_name, r.assignment_id,
-      ap.place_id as accommodation_place_id, acc_p.name as accommodation_name
+      ap.place_id as accommodation_place_id, acc_p.name as accommodation_name,
+      ap.start_day_id as accommodation_start_day_id, ap.end_day_id as accommodation_end_day_id
     FROM reservations r
     LEFT JOIN days d ON r.day_id = d.id
     LEFT JOIN places p ON r.place_id = p.id
@@ -93,7 +94,8 @@ export function listReservations(tripId: string | number) {
 export function getReservationWithJoins(id: string | number) {
   const row = db.prepare(`
     SELECT r.*, d.day_number, p.name as place_name, r.assignment_id,
-      ap.place_id as accommodation_place_id, acc_p.name as accommodation_name
+      ap.place_id as accommodation_place_id, acc_p.name as accommodation_name,
+      ap.start_day_id as accommodation_start_day_id, ap.end_day_id as accommodation_end_day_id
     FROM reservations r
     LEFT JOIN days d ON r.day_id = d.id
     LEFT JOIN places p ON r.place_id = p.id