Hotel Management — Frontend
Web app for the Hotel Management system: role-based dashboards for platform admins, hotel
admins/managers, housekeepers and guests. Talks to the ASP.NET Core API in the separate
Hotel-Management-backend repository.
Stack: Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS 4 · shadcn/ui (Radix) ·
TanStack Query · Zustand · date-fns · Recharts
Running locally
npm ci
echo "NEXT_PUBLIC_API_URL=http://localhost:5213/api" > .env.local # backend started with `dotnet run`
npm run dev # http://localhost:3000
Without NEXT_PUBLIC_API_URL the app calls http://localhost:5001/api (the Docker Compose port).
In development the login page lists the seeded demo accounts for each role.
| Script | What it does |
|---|
npm run dev | Dev server with Turbopack |
npm run build | Production build (type-checked) |
npm start | Serve the production build |
npm run lint | ESLint |
npm run test:e2e | End-to-end journeys with Playwright (see e2e/README.md) |
What each role sees
| Role | Lands on | Navigation |
|---|
| SuperAdmin | /dashboard/super-admin | Users, hotels, subscriptions |
| Admin / Manager | /dashboard/admin | Calendar, availability, hotels, rooms, reservations, guests, walk-in, inventory, housekeeping, reports; Admins also Staff and Billing |
| Housekeeper | /dashboard/housekeeping | Housekeeping tasks for their hotel |
| Guest | /dashboard/reservations | Their reservations, availability, calendar |
The API enforces all access rules; the UI only hides what a role can't use (hooks/usePermissions.ts).
Public pages: /pricing and /register-hotel (hotel owners sign up for a 30-day trial). When the API
refuses something because of the owner's plan (402), PlanLimitDialog offers the upgrade, and
SubscriptionBanner warns owners about ending trials and failed payments. Until a real payment
provider is connected, /dashboard/billing/checkout is a test checkout that charges nothing.
Project layout
app/ Routes (App Router). (auth)/ = login/register, dashboard/ = the app
components/ UI: ui/ (shadcn primitives), layout/, dashboard/, reservations/, rooms/, auth/
hooks/ TanStack Query hooks per resource
lib/api/ Axios API client and one module per backend resource
lib/utils/ Date helpers
store/authStore.ts Session (token + user), persisted to localStorage
types/ API types and enums (mirror the backend DTOs)
Conventions
- Session:
store/authStore.ts is the only place the token lives. The API client attaches it,
and on a 401 (outside login/register) signs out and redirects to /login. Expired stored
sessions are dropped on page load.
- Stay dates are hotel wall-clock values. Overnight stays are sent as
YYYY-MM-DD, short stays
as YYYY-MM-DDTHH:mm, without converting to UTC.
- Money: payments and refunds go through the reservation payment endpoints and show up in the
reservation's payment history; reservation edits never change amounts paid.
Deployment
Build with NEXT_PUBLIC_API_URL set to the public API URL (it's baked in at build time).
The Dockerfile takes it as a build argument; see the backend's docker-compose.yml.
Product direction and planned features: ROADMAP.md.
