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

Fade past dates in Direct Rates hotel detail view

Browse source 
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>
This commit is contained in:
jtricerolph 2026-07-12 12:24:56 +00:00
parent 960606cf6e
commit aef7d755f1
1 changed files with 5 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/pages/DirectRates.tsx
View file

@ -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>