export default function ShiftPlannerPrototype() {
const shifts = [
{ day: '1', shift: 'V', color: 'bg-green-500' },
{ day: '2', shift: 'N', color: 'bg-blue-900' },
{ day: '3', shift: 'Verlof', color: 'bg-yellow-400' },
{ day: '4', shift: 'Groot verlof', color: 'bg-purple-500' },
{ day: '5', shift: 'Wissel', color: 'bg-red-500' },
{ day: '6', shift: 'R', color: 'bg-green-700' },
{ day: '7', shift: 'Vrij', color: 'bg-gray-300' },
]
return (
)
}
Mijn Shiftplanner
Overzicht van shifts, verlof en wissels
14
Nachtshifts
6
Verlofdagen
2
Wissels
168u
Deze maand
Mei 2026
{['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'].map((d) => (
)
})}
{d}
))}
{Array.from({ length: 35 }).map((_, i) => {
const item = shifts[i % shifts.length]
return (
{i + 1}
{item.shift}
Legenda
Vroege shift
Nachtshift
Verlof gevraagd
Groot verlof
Wissel lopend
Nieuwe wissel
Verlofstatus
Gewenst verlof
4 dagen
Aangevraagd
2 dagen
Goedgekeurd
12 dagen
Groot verlof
5 dagen