# haidepzai269/booking-show-frontend architecture

> Architecture diagram of the GitHub repository haidepzai269/booking-show-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/haidepzai269/booking-show-frontend
- Repository: https://github.com/haidepzai269/booking-show-frontend

## Overview

This is a customer-facing cinema discovery and ticket-booking frontend, with account management and an administrative workspace. The principal journey is browsing movies or cinemas, choosing a showtime, selecting seats, completing checkout, then viewing tickets or orders. Catalog and authentication API calls are visible in sampled source; booking, payment, and most admin implementation details are not, so their internal service wiring is left unspecified.

Main entry points: [`src/app/admin/page.tsx`](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/page.tsx) (Admin workspace), [`src/app/movies/[id]/MovieDetailClient.tsx`](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/movies/%5Bid%5D/MovieDetailClient.tsx) (Movie details and showtimes), [`src/app/booking/checkout/[showtime_id]/page.tsx`](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/booking/checkout/%5Bshowtime_id%5D/page.tsx) (Checkout), [`src/app/booking/seat-selection/[showtime_id]/page.tsx`](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/booking/seat-selection/%5Bshowtime_id%5D/page.tsx) (Seat selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Film discovery"]
  node_home["Home and highlights<br/>[HomeClient.tsx]"]
  node_movies["Movie catalog"]
  node_movie_detail["Movie details and showtimes"]
  node_cinemas["Cinema directory<br/>[page.tsx]"]
  node_cinema_detail["Cinema and showtimes"]
  node_promotions["Promotions"]
  node_people["Person profiles"]
end

subgraph group_booking["Ticket booking"]
  node_seat_selection["Seat selection<br/>[page.tsx]"]
  node_checkout["Checkout<br/>[page.tsx]"]
  node_checkout_steps["Checkout steps<br/>[ConcessionStep.tsx]"]
  node_payment_step["Payment step<br/>[PaymentStep.tsx]"]
  node_payment_result["Payment result<br/>[page.tsx]"]
  node_tickets["Ticket views<br/>[page.tsx]"]
  node_orders["Order history<br/>[page.tsx]"]
end

subgraph group_account["Identity and account"]
  node_auth_pages["Sign-in and registration<br/>[page.tsx]"]
  node_auth_store[("Authentication state<br/>[authStore.ts]")]
  node_profile["Profile and settings<br/>[page.tsx]"]
end

subgraph group_admin["Cinema administration"]
  node_admin_dashboard["Admin workspace<br/>[page.tsx]"]
  node_admin_catalog["Catalog and schedule management<br/>[page.tsx]"]
  node_admin_orders["Order and refund management<br/>[page.tsx]"]
  node_admin_promotions["Campaign management<br/>[page.tsx]"]
  node_admin_users["User management<br/>[page.tsx]"]
end

subgraph group_platform["Shared frontend"]
  node_header["Shared navigation<br/>[Header.tsx]"]
  node_search["Movie search<br/>[SearchBar.tsx]"]
  node_admin_search["Admin search<br/>[AdminSearchBar.tsx]"]
  node_notifications["Admin notifications"]
end

node_customer(("Customer"))
node_admin_user(("Admin user"))
node_api{{"Backend API"}}

node_customer -->|"opens"| node_home
node_customer -->|"browses"| node_movies
node_customer -->|"browses"| node_cinemas
node_customer -->|"views"| node_promotions
node_home -->|"fetches highlights"| node_api
node_movies -->|"opens film"| node_movie_detail
node_cinemas -->|"opens venue"| node_cinema_detail
node_movie_detail -->|"loads details"| node_api
node_movie_detail -->|"chooses showtime"| node_seat_selection
node_cinema_detail -->|"chooses showtime"| node_seat_selection
node_seat_selection -->|"continues booking"| node_checkout
node_checkout -->|"presents steps"| node_checkout_steps
node_checkout -->|"presents payment"| node_payment_step
node_payment_step -->|"continues to result"| node_payment_result
node_customer -->|"views tickets"| node_tickets
node_customer -->|"views orders"| node_orders
node_customer -->|"authenticates"| node_auth_pages
node_auth_pages -->|"uses state"| node_auth_store
node_auth_store -->|"authenticates"| node_api
node_customer -->|"manages account"| node_profile
node_search -->|"searches movies"| node_api
node_header -->|"offers search"| node_search
node_admin_user -->|"opens workspace"| node_admin_dashboard
node_admin_dashboard -->|"manages catalog"| node_admin_catalog
node_admin_dashboard -->|"manages orders"| node_admin_orders
node_admin_dashboard -->|"manages campaigns"| node_admin_promotions
node_admin_dashboard -->|"manages users"| node_admin_users
node_admin_search -->|"searches records"| node_api
node_notifications -->|"fetches and updates"| node_api

click node_home "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/HomeClient.tsx"
click node_movies "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/movies/MoviesClientPage.tsx"
click node_movie_detail "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/movies/%5Bid%5D/MovieDetailClient.tsx"
click node_cinemas "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/cinemas/page.tsx"
click node_cinema_detail "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/cinemas/%5Bid%5D/CinemaDetailClient.tsx"
click node_promotions "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/promotions/PromotionsClientPage.tsx"
click node_people "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/persons/%5Bid%5D/PersonDetailClient.tsx"
click node_seat_selection "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/booking/seat-selection/%5Bshowtime_id%5D/page.tsx"
click node_checkout "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/booking/checkout/%5Bshowtime_id%5D/page.tsx"
click node_checkout_steps "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/checkout/ConcessionStep.tsx"
click node_payment_step "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/checkout/PaymentStep.tsx"
click node_payment_result "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/payment/result/page.tsx"
click node_tickets "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/tickets/my/page.tsx"
click node_orders "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/orders/my/page.tsx"
click node_auth_pages "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/login/page.tsx"
click node_auth_store "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/store/authStore.ts"
click node_profile "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/profile/page.tsx"
click node_admin_dashboard "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/page.tsx"
click node_admin_catalog "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/movies/page.tsx"
click node_admin_orders "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/orders/page.tsx"
click node_admin_promotions "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/campaigns/page.tsx"
click node_admin_users "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/users/page.tsx"
click node_header "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/layout/Header.tsx"
click node_search "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/layout/SearchBar.tsx"
click node_admin_search "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/admin/AdminSearchBar.tsx"
click node_notifications "https://github.com/haidepzai269/booking-show-frontend/blob/main/src/hooks/useAdminNotifications.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_movies,node_movie_detail,node_cinemas,node_cinema_detail,node_promotions,node_people,node_admin_user toneBlue
class node_seat_selection,node_checkout,node_checkout_steps,node_payment_step,node_payment_result,node_tickets,node_orders toneAmber
class node_auth_pages,node_auth_store,node_profile,node_api toneMint
class node_admin_dashboard,node_admin_catalog,node_admin_orders,node_admin_promotions,node_admin_users toneRose
class node_header,node_search,node_admin_search,node_notifications,node_customer toneIndigo
```

## Components

### Film discovery

- [Home and highlights](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/HomeClient.tsx): `src/app/HomeClient.tsx`
- [Movie catalog](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/movies/MoviesClientPage.tsx): `src/app/movies/MoviesClientPage.tsx`
- [Movie details and showtimes](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/movies/%5Bid%5D/MovieDetailClient.tsx): `src/app/movies/[id]/MovieDetailClient.tsx`
- [Cinema directory](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/cinemas/page.tsx): `src/app/cinemas/page.tsx`
- [Cinema and showtimes](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/cinemas/%5Bid%5D/CinemaDetailClient.tsx): `src/app/cinemas/[id]/CinemaDetailClient.tsx`
- [Promotions](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/promotions/PromotionsClientPage.tsx): `src/app/promotions/PromotionsClientPage.tsx`
- [Person profiles](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/persons/%5Bid%5D/PersonDetailClient.tsx): `src/app/persons/[id]/PersonDetailClient.tsx`

### Ticket booking

- [Seat selection](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/booking/seat-selection/%5Bshowtime_id%5D/page.tsx): `src/app/booking/seat-selection/[showtime_id]/page.tsx`
- [Checkout](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/booking/checkout/%5Bshowtime_id%5D/page.tsx): `src/app/booking/checkout/[showtime_id]/page.tsx`
- [Checkout steps](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/checkout/ConcessionStep.tsx): `src/components/checkout/ConcessionStep.tsx`
- [Payment step](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/checkout/PaymentStep.tsx): `src/components/checkout/PaymentStep.tsx`
- [Payment result](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/payment/result/page.tsx): `src/app/payment/result/page.tsx`
- [Ticket views](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/tickets/my/page.tsx): `src/app/tickets/my/page.tsx`
- [Order history](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/orders/my/page.tsx): `src/app/orders/my/page.tsx`

### Identity and account

- [Sign-in and registration](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/login/page.tsx): `src/app/login/page.tsx`
- [Authentication state](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/store/authStore.ts): `src/store/authStore.ts`
- [Profile and settings](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/profile/page.tsx): `src/app/profile/page.tsx`

### Cinema administration

- [Admin workspace](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/page.tsx): `src/app/admin/page.tsx`
- [Catalog and schedule management](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/movies/page.tsx): `src/app/admin/movies/page.tsx`
- [Order and refund management](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/orders/page.tsx): `src/app/admin/orders/page.tsx`
- [Campaign management](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/campaigns/page.tsx): `src/app/admin/campaigns/page.tsx`
- [User management](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/app/admin/users/page.tsx): `src/app/admin/users/page.tsx`

### Shared frontend

- [Shared navigation](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/layout/Header.tsx): `src/components/layout/Header.tsx`
- [Movie search](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/layout/SearchBar.tsx): `src/components/layout/SearchBar.tsx`
- [Admin search](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/components/admin/AdminSearchBar.tsx): `src/components/admin/AdminSearchBar.tsx`
- [Admin notifications](https://github.com/haidepzai269/booking-show-frontend/blob/main/src/hooks/useAdminNotifications.ts): `src/hooks/useAdminNotifications.ts`

### Other components

- **Customer**
- **Admin user**
- **Backend API**

## Connections

- Customer → Home and highlights: opens
- Customer → Movie catalog: browses
- Customer → Cinema directory: browses
- Customer → Promotions: views
- Home and highlights → Backend API: fetches highlights
- Movie catalog → Movie details and showtimes: opens film
- Cinema directory → Cinema and showtimes: opens venue
- Movie details and showtimes → Backend API: loads details
- Movie details and showtimes → Seat selection: chooses showtime
- Cinema and showtimes → Seat selection: chooses showtime
- Seat selection → Checkout: continues booking
- Checkout → Checkout steps: presents steps
- Checkout → Payment step: presents payment
- Payment step → Payment result: continues to result
- Customer → Ticket views: views tickets
- Customer → Order history: views orders
- Customer → Sign-in and registration: authenticates
- Sign-in and registration → Authentication state: uses state
- Authentication state → Backend API: authenticates
- Customer → Profile and settings: manages account
- Movie search → Backend API: searches movies
- Shared navigation → Movie search: offers search
- Admin user → Admin workspace: opens workspace
- Admin workspace → Catalog and schedule management: manages catalog
- Admin workspace → Order and refund management: manages orders
- Admin workspace → Campaign management: manages campaigns
- Admin workspace → User management: manages users
- Admin search → Backend API: searches records
- Admin notifications → Backend API: fetches and updates