# madondo07/margin-hotel-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/madondo07/margin-hotel-frontend
- Repository: https://github.com/madondo07/margin-hotel-frontend

## Overview

Margin Hotel is a Next.js frontend for public room discovery and booking plus staff-facing hotel operations. Guests browse room listings and details, then submit booking details; staff use admin pages to manage bookings, invoices, payments, and staff records. Resource API modules connect the frontend to the documented Spring Boot backend. The README also describes JWT authentication, though it notes that the login flow is not fully wired into API requests. Some links below reflect imports in the SOURCE INDEX; unsampled implementation details are not assumed.

Main entry points: [`components/booking/booking-form.tsx`](https://github.com/madondo07/margin-hotel-frontend/blob/main/components/booking/booking-form.tsx) (Booking form), [`app/rooms/page.tsx`](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/rooms/page.tsx) (Room listing), [`lib/api/invoice.ts`](https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/invoice.ts) (Invoice API), [`app/admin/bookings/page.tsx`](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/bookings/page.tsx) (Booking admin)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public hotel site"]
  node_home["Hotel homepage<br/>[page.tsx]"]
  node_site_sections["Landing sections"]
  node_navbar["Public navigation<br/>[navbar.tsx]"]
  node_room_list["Room listing<br/>[page.tsx]"]
  node_room_detail["Room details<br/>[page.tsx]"]
  node_room_data["Room demo data<br/>[rooms.ts]"]
  node_room_card["Room card<br/>[room-card.tsx]"]
end

subgraph group_booking["Booking workflow"]
  node_booking_page["Booking page<br/>[page.tsx]"]
  node_guest_form["Guest booking form"]
  node_booking_form["Booking form<br/>[booking-form.tsx]"]
  node_booking_validation["Booking validation<br/>[booking-schema.ts]"]
  node_room_dialog["Room booking dialog"]
end

subgraph group_admin["Staff operations"]
  node_admin_bookings["Booking admin<br/>[page.tsx]"]
  node_admin_dashboard["Staff dashboard<br/>[page.tsx]"]
  node_admin_invoices["Invoice admin<br/>[page.tsx]"]
  node_invoice_dialogs["Invoice dialogs"]
  node_invoice_form["Invoice form<br/>[invoice-form.tsx]"]
  node_admin_payments["Payment admin<br/>[page.tsx]"]
  node_admin_staff["Staff admin<br/>[page.tsx]"]
  node_admin_login["Admin login<br/>[page.tsx]"]
end

subgraph group_integration["API and auth"]
  node_session["Session storage<br/>[session.ts]"]
  node_booking_api["Booking API<br/>[booking.ts]"]
  node_invoice_api["Invoice API<br/>[invoice.ts]"]
  node_payment_api["Payment API<br/>[payment.ts]"]
  node_staff_api["Staff API<br/>[staff.ts]"]
  node_auth_api["Auth API<br/>[auth.ts]"]
  node_axios["Axios client<br/>[axios.ts]"]
end

node_guest(("Guest"))
node_backend["Spring Boot backend"]

node_guest -->|"visits"| node_home
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_site_sections
node_navbar -->|"links to"| node_room_list
node_guest -->|"browses"| node_room_list
node_room_list -->|"renders"| node_room_card
node_room_list -->|"reads"| node_room_data
node_room_detail -->|"reads"| node_room_data
node_room_detail -->|"renders"| node_room_dialog
node_guest -->|"starts booking"| node_booking_page
node_booking_page -->|"renders"| node_guest_form
node_room_dialog -->|"renders"| node_booking_form
node_guest_form -.->|"uses"| node_booking_form
node_booking_form -->|"validates with"| node_booking_validation
node_booking_form -->|"submits to"| node_booking_api
node_admin_bookings -.->|"manages bookings"| node_booking_api
node_admin_bookings -->|"reads"| node_room_data
node_admin_bookings -.->|"opens dialog"| node_booking_form
node_admin_invoices -->|"lists and deletes"| node_invoice_api
node_admin_invoices -->|"renders"| node_invoice_dialogs
node_invoice_dialogs -->|"uses"| node_invoice_form
node_invoice_form -->|"creates or updates"| node_invoice_api
node_admin_payments -->|"fetches payments"| node_payment_api
node_admin_staff -->|"manages staff"| node_staff_api
node_admin_login -->|"authenticates with"| node_auth_api
node_admin_login -->|"stores session"| node_session
node_auth_api -->|"uses"| node_axios
node_invoice_api -->|"uses"| node_axios
node_booking_api -->|"sends requests"| node_backend
node_invoice_api -->|"sends requests"| node_backend
node_payment_api -->|"sends requests"| node_backend
node_staff_api -->|"sends requests"| node_backend
node_admin_dashboard -.->|"loads operational data"| node_backend

click node_home "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/page.tsx"
click node_site_sections "https://github.com/madondo07/margin-hotel-frontend/tree/main/components/layout/sections"
click node_navbar "https://github.com/madondo07/margin-hotel-frontend/blob/main/components/layout/navbar.tsx"
click node_room_list "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/rooms/page.tsx"
click node_room_detail "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/rooms/%5BroomId%5D/page.tsx"
click node_room_data "https://github.com/madondo07/margin-hotel-frontend/blob/main/data/rooms.ts"
click node_room_card "https://github.com/madondo07/margin-hotel-frontend/blob/main/components/rooms/room-card.tsx"
click node_booking_page "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/book/page.tsx"
click node_guest_form "https://github.com/madondo07/margin-hotel-frontend/blob/main/components/booking/guest-booking-form.tsx"
click node_booking_form "https://github.com/madondo07/margin-hotel-frontend/blob/main/components/booking/booking-form.tsx"
click node_booking_validation "https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/validations/booking-schema.ts"
click node_room_dialog "https://github.com/madondo07/margin-hotel-frontend/blob/main/components/rooms/room-booking-dialog.tsx"
click node_admin_bookings "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/bookings/page.tsx"
click node_admin_dashboard "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/dashboard/page.tsx"
click node_admin_invoices "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/invoices/page.tsx"
click node_invoice_dialogs "https://github.com/madondo07/margin-hotel-frontend/tree/main/components/invoice"
click node_invoice_form "https://github.com/madondo07/margin-hotel-frontend/blob/main/components/invoice/invoice-form.tsx"
click node_admin_payments "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/payments/page.tsx"
click node_admin_staff "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/staff/page.tsx"
click node_admin_login "https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/login/page.tsx"
click node_session "https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/auth/session.ts"
click node_booking_api "https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/booking.ts"
click node_invoice_api "https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/invoice.ts"
click node_payment_api "https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/payment.ts"
click node_staff_api "https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/staff.ts"
click node_auth_api "https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/auth.ts"
click node_axios "https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/axios.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_site_sections,node_navbar,node_room_list,node_room_detail,node_room_data,node_room_card toneBlue
class node_booking_page,node_guest_form,node_booking_form,node_booking_validation,node_room_dialog toneAmber
class node_admin_bookings,node_admin_dashboard,node_admin_invoices,node_invoice_dialogs,node_invoice_form,node_admin_payments,node_admin_staff,node_admin_login toneMint
class node_session,node_booking_api,node_invoice_api,node_payment_api,node_staff_api,node_auth_api,node_axios toneRose
class node_guest,node_backend toneIndigo
```

## Components

### Public hotel site

- [Hotel homepage](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/page.tsx): `app/page.tsx`
- [Landing sections](https://github.com/madondo07/margin-hotel-frontend/tree/main/components/layout/sections): `components/layout/sections`
- [Public navigation](https://github.com/madondo07/margin-hotel-frontend/blob/main/components/layout/navbar.tsx): `components/layout/navbar.tsx`
- [Room listing](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/rooms/page.tsx): `app/rooms/page.tsx`
- [Room details](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/rooms/%5BroomId%5D/page.tsx): `app/rooms/[roomId]/page.tsx`
- [Room demo data](https://github.com/madondo07/margin-hotel-frontend/blob/main/data/rooms.ts): `data/rooms.ts`
- [Room card](https://github.com/madondo07/margin-hotel-frontend/blob/main/components/rooms/room-card.tsx): `components/rooms/room-card.tsx`

### Booking workflow

- [Booking page](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/book/page.tsx): `app/book/page.tsx`
- [Guest booking form](https://github.com/madondo07/margin-hotel-frontend/blob/main/components/booking/guest-booking-form.tsx): `components/booking/guest-booking-form.tsx`
- [Booking form](https://github.com/madondo07/margin-hotel-frontend/blob/main/components/booking/booking-form.tsx): `components/booking/booking-form.tsx`
- [Booking validation](https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/validations/booking-schema.ts): `lib/validations/booking-schema.ts`
- [Room booking dialog](https://github.com/madondo07/margin-hotel-frontend/blob/main/components/rooms/room-booking-dialog.tsx): `components/rooms/room-booking-dialog.tsx`

### Staff operations

- [Booking admin](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/bookings/page.tsx): `app/admin/bookings/page.tsx`
- [Staff dashboard](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/dashboard/page.tsx): `app/admin/dashboard/page.tsx`
- [Invoice admin](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/invoices/page.tsx): `app/admin/invoices/page.tsx`
- [Invoice dialogs](https://github.com/madondo07/margin-hotel-frontend/tree/main/components/invoice): `components/invoice`
- [Invoice form](https://github.com/madondo07/margin-hotel-frontend/blob/main/components/invoice/invoice-form.tsx): `components/invoice/invoice-form.tsx`
- [Payment admin](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/payments/page.tsx): `app/admin/payments/page.tsx`
- [Staff admin](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/staff/page.tsx): `app/admin/staff/page.tsx`
- [Admin login](https://github.com/madondo07/margin-hotel-frontend/blob/main/app/admin/login/page.tsx): `app/admin/login/page.tsx`

### API and auth

- [Session storage](https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/auth/session.ts): `lib/auth/session.ts`
- [Booking API](https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/booking.ts): `lib/api/booking.ts`
- [Invoice API](https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/invoice.ts): `lib/api/invoice.ts`
- [Payment API](https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/payment.ts): `lib/api/payment.ts`
- [Staff API](https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/staff.ts): `lib/api/staff.ts`
- [Auth API](https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/auth.ts): `lib/api/auth.ts`
- [Axios client](https://github.com/madondo07/margin-hotel-frontend/blob/main/lib/api/axios.ts): `lib/api/axios.ts`

### Other components

- **Guest**
- **Spring Boot backend**

## Connections

- Guest → Hotel homepage: visits (evidence: `README.md`)
- Hotel homepage → Public navigation: renders (evidence: `app/page.tsx`)
- Hotel homepage → Landing sections: renders (evidence: `app/page.tsx`)
- Public navigation → Room listing: links to (evidence: `components/layout/navbar.tsx`)
- Guest → Room listing: browses (evidence: `README.md`)
- Room listing → Room card: renders (evidence: `app/rooms/page.tsx`)
- Room listing → Room demo data: reads (evidence: `app/rooms/page.tsx`)
- Room details → Room demo data: reads (evidence: `app/rooms/[roomId]/page.tsx`)
- Room details → Room booking dialog: renders (evidence: `app/rooms/[roomId]/page.tsx`)
- Guest → Booking page: starts booking (evidence: `README.md`)
- Booking page → Guest booking form: renders (evidence: `app/book/page.tsx`)
- Room booking dialog → Booking form: renders (evidence: `components/rooms/room-booking-dialog.tsx`)
- Guest booking form → Booking form: uses
- Booking form → Booking validation: validates with (evidence: `components/booking/booking-form.tsx`)
- Booking form → Booking API: submits to (evidence: `components/booking/booking-form.tsx`)
- Booking admin → Booking API: manages bookings
- Booking admin → Room demo data: reads (evidence: `app/admin/bookings/page.tsx`)
- Booking admin → Booking form: opens dialog
- Invoice admin → Invoice API: lists and deletes (evidence: `app/admin/invoices/page.tsx`)
- Invoice admin → Invoice dialogs: renders (evidence: `app/admin/invoices/page.tsx`)
- Invoice dialogs → Invoice form: uses (evidence: `components/invoice/edit-invoice-dialog.tsx`)
- Invoice form → Invoice API: creates or updates (evidence: `components/invoice/invoice-form.tsx`)
- Payment admin → Payment API: fetches payments (evidence: `app/admin/payments/page.tsx`)
- Staff admin → Staff API: manages staff (evidence: `app/admin/staff/page.tsx`)
- Admin login → Auth API: authenticates with (evidence: `app/admin/login/page.tsx`)
- Admin login → Session storage: stores session (evidence: `app/admin/login/page.tsx`)
- Auth API → Axios client: uses (evidence: `lib/api/auth.ts`)
- Invoice API → Axios client: uses (evidence: `lib/api/invoice.ts`)
- Booking API → Spring Boot backend: sends requests (evidence: `README.md`)
- Invoice API → Spring Boot backend: sends requests (evidence: `README.md`)
- Payment API → Spring Boot backend: sends requests (evidence: `README.md`)
- Staff API → Spring Boot backend: sends requests (evidence: `README.md`)
- Staff dashboard → Spring Boot backend: loads operational data