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