From 808fa6f8b289baa0570dc100b93e4a6bc2839fb8 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Sun, 12 Jul 2026 13:36:29 +0000
Subject: [PATCH] Fade past dates in Bookability matrix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply 45% opacity to all column cells where stay_date < today —
date header, category fill, occupancy, and all tariff cells —
matching the same visual treatment as the Direct Rates table.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/Bookability.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Bookability.tsx b/frontend/src/pages/Bookability.tsx
index 396d4f1..9b7a83e 100644
--- a/frontend/src/pages/Bookability.tsx
+++ b/frontend/src/pages/Bookability.tsx
@@ -77,6 +77,9 @@ const isWeekend = (dateStr: string): boolean => {
   return day === 0 || day === 6
 }
 
+const todayStr = fmtDate(new Date())
+const isPast = (dateStr: string): boolean => dateStr < todayStr
+
 const formatCurrency = (value: number | null): string => {
   if (value === null || value === undefined) return '-'
   return new Intl.NumberFormat('en-GB', {
@@ -424,7 +427,8 @@ const Bookability: React.FC = () => {
                           styles.th,
                           styles.dateHeader,
                           styles.stickyHeader,
-                          isWeekend(dateStr) ? styles.weekendHeader : {}
+                          isWeekend(dateStr) ? styles.weekendHeader : {},
+                          isPast(dateStr) ? { opacity: 0.45 } : {}
                         )}
                       >
                         <div style={styles.dateHeaderContent}>
@@ -472,7 +476,7 @@ const Bookability: React.FC = () => {
                             <span style={styles.roomCount}> ({category.room_count} rooms)</span>
                           </td>
                           {data.dates.map(dateStr => (
-                            <td key={dateStr} style={styles.categoryHeaderFill} />
+                            <td key={dateStr} style={mergeStyles(styles.categoryHeaderFill, isPast(dateStr) ? { opacity: 0.45 } : {})} />
                           ))}
                         </tr>
                         {/* Occupancy row */}
@@ -491,7 +495,8 @@ const Bookability: React.FC = () => {
                                     styles.td,
                                     styles.occupancyCell,
                                     isWeekend(dateStr) ? styles.weekendCell : {},
-                                    { cursor: 'pointer' }
+                                    { cursor: 'pointer' },
+                                    isPast(dateStr) ? { opacity: 0.45 } : {}
                                   )}
                                   title="Click for history"
                                   onClick={() => setHistory({ categoryId: category.category_id, categoryName: category.category_name, date: dateStr })}
@@ -521,7 +526,8 @@ const Bookability: React.FC = () => {
                                   styles.occupancyCell,
                                   isWeekend(dateStr) ? styles.weekendCell : {},
                                   getOccStyle(),
-                                  { cursor: 'pointer' }
+                                  { cursor: 'pointer' },
+                                  isPast(dateStr) ? { opacity: 0.45 } : {}
                                 )}
                                 title={`${occ.occupied} of ${bookableRooms} bookable rooms occupied${hasOffline ? ` (${occ.maintenance} offline)` : ''} - ${roomsLeft} left · click for history`}
                                 onClick={() => setHistory({ categoryId: category.category_id, categoryName: category.category_name, date: dateStr })}
@@ -565,7 +571,8 @@ const Bookability: React.FC = () => {
                                         styles.td,
                                         styles.tariffCell,
                                         isWeekend(dateStr) ? styles.weekendCell : {},
-                                        noRoomsAvailable ? styles.cellNoRooms : styles.cellNoData
+                                        noRoomsAvailable ? styles.cellNoRooms : styles.cellNoData,
+                                        isPast(dateStr) ? { opacity: 0.45 } : {}
                                       )}
                                       title={noRoomsAvailable ? 'No rooms available · click for history' : 'Click for history'}
                                       onClick={() => setHistory({ categoryId: category.category_id, categoryName: category.category_name, date: dateStr })}
@@ -604,7 +611,8 @@ const Bookability: React.FC = () => {
                                       styles.tariffCell,
                                       isWeekend(dateStr) ? styles.weekendCell : {},
                                       getCellStyle(),
-                                      !isEffectivelyAvailable && !noRoomsAvailable ? { textDecoration: 'line-through' } : {}
+                                      !isEffectivelyAvailable && !noRoomsAvailable ? { textDecoration: 'line-through' } : {},
+                                      isPast(dateStr) ? { opacity: 0.45 } : {}
                                     )}
                                     title={`${getTooltip()} · click for history`}
                                     onClick={() => setHistory({ categoryId: category.category_id, categoryName: category.category_name, date: dateStr })}