hotel-manage-stack/rates
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Fade past dates in Bookability matrix

Browse source 
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>
This commit is contained in:
jtricerolph 2026-07-12 13:36:29 +00:00
parent c63f8c5c4d
commit 808fa6f8b2
1 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/pages/Bookability.tsx
View file

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