How madondo07/margin-hotel-frontend works
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: booking-form.tsx Booking form · rooms/page.tsx Room listing · invoice.ts Invoice API · bookings/page.tsx Booking admin
Components 29
Public hotel site
- Hotel homepage
app/page.tsx - Landing sections
components/layout/sections - Public navigation
components/layout/navbar.tsx - Room listing
app/rooms/page.tsx - Room details
app/rooms/[roomId]/page.tsx - Room demo data
data/rooms.ts - Room card
components/rooms/room-card.tsx
Booking workflow
- Booking page
app/book/page.tsx - Guest booking form
components/booking/guest-booking-form.tsx - Booking form
components/booking/booking-form.tsx - Booking validation
lib/validations/booking-schema.ts - Room booking dialog
components/rooms/room-booking-dialog.tsx
Staff operations
- Booking admin
app/admin/bookings/page.tsx - Staff dashboard
app/admin/dashboard/page.tsx - Invoice admin
app/admin/invoices/page.tsx - Invoice dialogs
components/invoice - Invoice form
components/invoice/invoice-form.tsx - Payment admin
app/admin/payments/page.tsx - Staff admin
app/admin/staff/page.tsx - Admin login
app/admin/login/page.tsx
API and auth
- Session storage
lib/auth/session.ts - Booking API
lib/api/booking.ts - Invoice API
lib/api/invoice.ts - Payment API
lib/api/payment.ts - Staff API
lib/api/staff.ts - Auth API
lib/api/auth.ts - Axios client
lib/api/axios.ts
Other components
- Guest
- Spring Boot backend
Connections 33
- Guest → Hotel homepage: visits
README.md - Hotel homepage → Public navigation: renders
app/page.tsx - Hotel homepage → Landing sections: renders
app/page.tsx - Public navigation → Room listing: links to
components/layout/navbar.tsx - Guest → Room listing: browses
README.md - Room listing → Room card: renders
app/rooms/page.tsx - Room listing → Room demo data: reads
app/rooms/page.tsx - Room details → Room demo data: reads
app/rooms/[roomId]/page.tsx - Room details → Room booking dialog: renders
app/rooms/[roomId]/page.tsx - Guest → Booking page: starts booking
README.md - Booking page → Guest booking form: renders
app/book/page.tsx - Room booking dialog → Booking form: renders
components/rooms/room-booking-dialog.tsx - Guest booking form → Booking form: uses
- Booking form → Booking validation: validates with
components/booking/booking-form.tsx - Booking form → Booking API: submits to
components/booking/booking-form.tsx - Booking admin → Booking API: manages bookings
- Booking admin → Room demo data: reads
app/admin/bookings/page.tsx - Booking admin → Booking form: opens dialog
- Invoice admin → Invoice API: lists and deletes
app/admin/invoices/page.tsx - Invoice admin → Invoice dialogs: renders
app/admin/invoices/page.tsx - Invoice dialogs → Invoice form: uses
components/invoice/edit-invoice-dialog.tsx - Invoice form → Invoice API: creates or updates
components/invoice/invoice-form.tsx - Payment admin → Payment API: fetches payments
app/admin/payments/page.tsx - Staff admin → Staff API: manages staff
app/admin/staff/page.tsx - Admin login → Auth API: authenticates with
app/admin/login/page.tsx - Admin login → Session storage: stores session
app/admin/login/page.tsx - Auth API → Axios client: uses
lib/api/auth.ts - Invoice API → Axios client: uses
lib/api/invoice.ts - Booking API → Spring Boot backend: sends requests
README.md - Invoice API → Spring Boot backend: sends requests
README.md - Payment API → Spring Boot backend: sends requests
README.md - Staff API → Spring Boot backend: sends requests
README.md - Staff dashboard → Spring Boot backend: loads operational data