Web app for restaurant reservations

Job ID: 35630653

Budget: $30 – $250 USD

A web app with 3 leves of access: Admin, Operator and User.

Admin interface:

1. Can create a custom shape on a canvas, could be a simple rectangle or a shape like in the example (example: https://prnt.sc/iw0JqAP5uyc_)
2. From a toolbar, drag icons on the created canvas: square table, rectangle table, separator space, windows, door). The icons should be resizable. After positioning a table on the canvas, clicking on it opens a small option panel (like this: https://prnt.sc/0dEU2wWJCY-e), where the admin can specify table capacity (how many people), change table name, rotate table (for rectangle tables ) and also have the option to delete the table.
Separators are just striped rectangles that can be drawn with the mouse (example: https://prnt.sc/01m1pgrmGwOB ) - only option for separators on click is -Delete.
Windows are similar to separators (free drawable rectangle but filled with yellow color example: https://prnt.sc/rYegcCTFW_ts).
Door - a resizable door icon ( Options on click: Delete).

User interface:
Has a date and time selector.
The canvas shows all tables as arranged by the admin. Each table displays its Name and capacity (Example: Table 1 , 4 ? ).

After selecting a date and time, the canvas updates and shows all unavailable tables for that date and time as greyed out and unclickable. All the available tables will be show as normal and the user will be able to click on them. On click, a form will appear :
Name:
Phone number:
email:
Persons:
Submit.

Submitting the data updates table status in the database.


Operator interface:
Default view shows the canvas with current time an date status: greyed out if occupied, normal view if not.
Clicking on a table shows a new window with a Date picker and a list of reservations for that table. Clicking on a line shows reservation details and the option to change or deleted the reservation.
Related categories: JavaScript AJAX MySQL HTML5 jQuery