From aef7d755f1de6755563f92be165b834b51212be7 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Sun, 12 Jul 2026 12:24:56 +0000
Subject: [PATCH] Fade past dates in Direct Rates hotel detail view

Apply 45% opacity to rows where stay_date < today so past dates are
visually distinguished while preserving the red/yellow/green availability
colour semantics. Expansion rows carry the same opacity.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/DirectRates.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/DirectRates.tsx b/frontend/src/pages/DirectRates.tsx
index ec9cec3..533ac10 100644
--- a/frontend/src/pages/DirectRates.tsx
+++ b/frontend/src/pages/DirectRates.tsx
@@ -424,17 +424,18 @@ function HotelDetailTab({ hotels, selectedHotel, onSelectHotel, data, datesLoadi
                 </tr>
               </thead>
               <tbody>
-                {dates.map(d => {
+                {(() => { const today = fmtDate(new Date()); return dates.map(d => {
                   const day = new Date(d.stay_date + 'T12:00:00')
                   const dow = DAYS[day.getDay()]
                   const isWeekend = day.getDay() === 0 || day.getDay() === 5 || day.getDay() === 6
                   const isMinStay = !!(d.min_stay_nights && d.min_stay_nights > 1)
                   const isFull = d.total_avail === 0 && !isMinStay
+                  const isPast = d.stay_date < today
                   return (
                     <React.Fragment key={d.stay_date}>
                       <tr
                         onClick={() => setExpandedDate(expandedDate === d.stay_date ? null : d.stay_date)}
-                        style={{ cursor: 'pointer' }}
+                        style={{ cursor: 'pointer', opacity: isPast ? 0.45 : 1 }}
                       >
                         <td style={{ width: 24, color: 'var(--text-mid)' }}>
                           {expandedDate === d.stay_date
@@ -482,7 +483,7 @@ function HotelDetailTab({ hotels, selectedHotel, onSelectHotel, data, datesLoadi
                         </td>
                       </tr>
                       {expandedDate === d.stay_date && roomData && (
-                        <tr>
+                        <tr style={{ opacity: isPast ? 0.45 : 1 }}>
                           <td colSpan={9} style={{ background: '#f8fafc', padding: '8px 16px' }}>
                             <RoomBreakdown
                               rooms={roomData.rooms}
@@ -494,7 +495,7 @@ function HotelDetailTab({ hotels, selectedHotel, onSelectHotel, data, datesLoadi
                       )}
                     </React.Fragment>
                   )
-                })}
+                })})()}
               </tbody>
             </table>
           </div>