Field Type - Copy this React, Mui Component to your project

Create a timetable for users to book soccer fields, including 3 types of soccer fields, 3 field booking statuses (available is white or green, booked is yellow and the field is still in use is red). And I want when clicking on a box on the timetable, a popup will appear for users to enter a name and select a category such as training, competition or event. If there is a box on the timetable in red status, users cannot do anything and will be notified that the field is used at this time and there is an additional function to switch from the yellow booked status to the red field occupied status.