I need to create react component, which will be a grid and display reservations in hotel.
There are following requirements to grid
1) number of columns it determined by variable of days in past + current day + variable of days in future
2) header is sticky and display dates according to variables (for example - 5 days in past are set, so 5 previous dates are displayed + current date + dates in future)
3) number of rows determined by variable of number of rooms in hotel. first column is also stickty and inside a name of room is displayed
4) by clickicking on cells and holding mouse button new reservations can be created. so user click on cell, moves cursor while holding it and when he releases button new page is opened for creation reservation (reservation creation is out of scope)
5) existing reservations shows differently in cells.
- current reservation
- archived reservation
- not payed reservation
6) depending on payment type of reservation different emoji is shown inside cell
7) reservation can start in one room and end in different - it also must be shown
8) start and end of reservation must be shown