72 lines
2.1 KiB
React
72 lines
2.1 KiB
React
import ShiftSlot from './ShiftSlot'
|
||
|
||
const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
||
|
||
export default function DayColumn({
|
||
date,
|
||
isToday,
|
||
activeShifts = new Set(),
|
||
shifts = {},
|
||
nextDayShift1 = [],
|
||
nextDayShift1Active = false,
|
||
showShift2 = false,
|
||
windowLookup = new Map(),
|
||
onWindowSelect,
|
||
}) {
|
||
const dayName = DAY_NAMES[date.getDay()]
|
||
const dayNum = date.getDate()
|
||
const dateKey = date.toISOString().slice(0, 10)
|
||
|
||
function getWindowForShift(shiftIndex) {
|
||
return windowLookup.get(`${dateKey}::shift${shiftIndex}`) ?? null
|
||
}
|
||
|
||
const shift2Visible = showShift2 || shifts.shift2.length > 0 || Boolean(getWindowForShift(2))
|
||
|
||
return (
|
||
<div className="flex flex-col min-w-0 flex-1 rounded-lg border border-gray-700 bg-gray-800/40">
|
||
{/* Day header — subtle today ring, no full-column highlight */}
|
||
<div
|
||
className={`text-center py-1.5 rounded-t-lg ${
|
||
isToday ? 'bg-gray-600 text-white' : 'bg-gray-700/60 text-gray-300'
|
||
}`}
|
||
>
|
||
<p className="text-[11px] font-semibold uppercase tracking-wide leading-none">
|
||
{dayName}
|
||
</p>
|
||
<p className={`text-base font-bold leading-tight ${isToday ? 'text-white' : 'text-gray-100'}`}>
|
||
{dayNum}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Shifts */}
|
||
<div className="flex flex-col flex-1 px-0.5 py-1">
|
||
<ShiftSlot
|
||
label="9AM–5PM"
|
||
tests={shifts.shift2}
|
||
visible={true}
|
||
active={activeShifts.has(2)}
|
||
windowDetails={getWindowForShift(2)}
|
||
onWindowSelect={onWindowSelect}
|
||
/>
|
||
<ShiftSlot
|
||
label="5PM–12AM"
|
||
tests={shifts.shift3}
|
||
visible={true}
|
||
active={activeShifts.has(3)}
|
||
windowDetails={getWindowForShift(3)}
|
||
onWindowSelect={onWindowSelect}
|
||
/>
|
||
<ShiftSlot
|
||
label="12AM–9AM (next day)"
|
||
tests={nextDayShift1}
|
||
visible={true}
|
||
active={nextDayShift1Active}
|
||
windowDetails={null}
|
||
onWindowSelect={onWindowSelect}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|