The purchaseModal/SeatSelector does not function that well when using a small device. The TicketSelector is too big, and the Seating map becomes too small in comparison.

At smaller device size the ticketSelector should be integrated into a smaller, more compact, footer of the modal, the seat map can then scale to full width.

Use the ticket.seat data available in the screening to determine if a seat is occupied.

The movie theater seat selection should be done as a interactive svg where a user can pick an empty seat.

Make a template for these theater svgs

Make the upcoming screening list position appear right below the image when on small screens, but keep to the left of the poster when on larger screen.

Movie summary, rating, runtime etc should just be pushed further down.

Display the movie.review_rating value as stars.

Display a few upcoming screenings of a specific movie when entering av specifc movie page.

Implement the ticket type endpoint and class.

Should retrieve active ticket types and display that as ticket options in the purchaseModal.

Should display which type of ticket a ticket is on the purchaseHistory ticketCard

Change the header to not follow the page.

Should be quickly done with changing position, but other elements might need to be adjusted when header is non-static.

The profile should have some way to let the user see their future and previous tickets.

MovieCard and ScreeningCard was separated into their own components just to have different navigation.

These components should be reusable. Make movieCard suitable to handle its use in the ScreeningCard aswell.

Make screening booking page.

Linked to from upcoming movies and the movie details page (when clicking on a specifc shown screening).

Make the ScreeningItem component a nicer designed component.

The initial idea is to have it be more rectangular, with some more information. It could also contain information about the number of available seats for the screening etc.

• Ensure even whitespace on all sides of the model.
• Make background blurred when modal is active

Add some filters to the UpcomingScreenings component.

Must have filter:

• Theater
• Date

Could be cool filters:

• Runtime
• Rating
• Movie

Add the screening start time to the cards within the "screening/upcoming" section.

Also ensure that the cards are sorted by the screening time.

Change the document header to something related to the project

Make a profile page view, that is linked to from the accountIcon, that displays some relevant information about the user.

The overview of movies at "/movies" is not centered.

Make a frontpage for the site, should be in the landing page component.

Suggested content:

• Highlighted movie (mini screening section, movie defined by admin/backend)
• Latest movies
  • Need to add release time/date to backend data aswell.
• Top rated movies

Allow users to generate tickets for a screening.

Make a admin-only (access controlled) page that allow for creation of screenings for a specific move and theater, on a provided date.

Add a contact component bar that should be displayed below all other content.

Should contain info/link to a "About" page, which explaines the site is just for demonstration purposes.
Could possible contain a link to the github repo aswell.

Fix the header to show all required elements and scale to smaller screens.

Current behaviour is scaling down to a minimum size then overflowing.

Suggested solution: Conditional render som hamburger menu instead of the interactable elements directly when screen width below a certain value.

Have made smaller DTOs in the backend, and more endpoints to get the other data.

This results in significantly smaller join tables, so should have noticable impact on performance. However it does require more api calls.

Update the frontend to handle these new api calls and put its data into the old data objects again

Add a page/component that displays all details about a screening.

Currently the upcoming movie list will show multiple cards on the same day veritically.

That is fine for small screening, but need to do horizontally for larger screens.

Add some filter options for the MovieOverviewPage

Depending on implementation the filters for Screening might be reused.

Add a link to screening/upcoming in the header.

Use the specific ticket endpoint to update the screening.Tickets value on screening for the PurchaseModal.

Should be both quicker and less resource intensive for the backend to just prepare tickets instead of the full Screening with theater, seats, etc...

A list of screenings, preferably shown as cards or something, that shows the next screening to start.

Should not just sort by date, but actually take into accoutn current time. No point showing screenings that occured 50 years ago!

Might require a dedicated endpoint. Input of time and retrieve X number of screenings that occur closest to but not before the provided time.

Make a admin only page that allows for both generation of movies, but also addition of new movies