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

Show muted icons on intermediate rota footer rows

Browse source 
vs Booked, with Recurring Tasks, and with Pickup now show ⚠/✓/✗
in muted grey using the same amber thresholds as the final row,
giving a quick visual cue without the coloured emphasis.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-22 13:41:07 +00:00
parent 75ac7591d2
commit 1a8d8d9a2b
5 changed files with 25 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/pages/Planner.tsx
View file

@ -915,21 +915,21 @@ function StaffTable({ bookings, staff, required, warnOverRed, warnOverAmber, war
<tr>
<td className="col-label" style={{ fontSize: '0.72rem', color: 'var(--text-mid)' }}>vs Booked</td>
{dates.map(date => (
<td key={date}><PlainDiffCell available={avail[date]} required={required[date].booked} /></td>
<td key={date}><PlainDiffCell available={avail[date]} required={required[date].booked} warnOverAmber={warnOverAmber} warnUnderAmber={warnUnderAmber} /></td>
))}
<td />
</tr>
<tr>
<td className="col-label" style={{ fontSize: '0.72rem', color: 'var(--text-mid)' }}>with Recurring Tasks</td>
{dates.map(date => (
<td key={date}><PlainDiffCell available={avail[date]} required={required[date].booked + required[date].general} /></td>
<td key={date}><PlainDiffCell available={avail[date]} required={required[date].booked + required[date].general} warnOverAmber={warnOverAmber} warnUnderAmber={warnUnderAmber} /></td>
))}
<td />
</tr>
<tr>
<td className="col-label" style={{ fontSize: '0.72rem', color: 'var(--text-mid)' }}>with Pickup</td>
{dates.map(date => (
<td key={date}><PlainDiffCell available={avail[date]} required={required[date].booked + required[date].general + required[date].pickup} /></td>
<td key={date}><PlainDiffCell available={avail[date]} required={required[date].booked + required[date].general + required[date].pickup} warnOverAmber={warnOverAmber} warnUnderAmber={warnUnderAmber} /></td>
))}
<td />
</tr>
@ -948,10 +948,13 @@ function StaffTable({ bookings, staff, required, warnOverRed, warnOverAmber, war
)
}
function PlainDiffCell({ available, required }: { available: number; required: number }) {
function PlainDiffCell({ available, required, warnOverAmber, warnUnderAmber }: {
available: number; required: number; warnOverAmber: number; warnUnderAmber: number
}) {
if (available === 0 && required === 0) return <span style={{ color: 'var(--text-mid)' }}>—</span>
const diff = available - required
return <span style={{ color: 'var(--text-mid)', fontSize: '0.82rem' }}>{diff >= 0 ? '+' : ''}{fmtH(diff)}</span>
const icon = diff > warnOverAmber ? '⚠' : diff < -warnUnderAmber ? '✗' : '✓'
return <span style={{ color: 'var(--text-mid)', fontSize: '0.82rem' }}>{icon} {diff >= 0 ? '+' : ''}{fmtH(diff)}</span>
}
function DiffCell({ available, required, warnOverRed, warnOverAmber, warnUnderAmber, warnUnderRed }: {