Frontdesk — Free Hotel Management System Template
Frontdesk gives a hotel’s front office one place to work from. The dashboard opens on tonight’s occupancy, today’s arrivals and departures, ADR and RevPAR, then a tape chart shows every room across the next 14 nights. Housekeeping can flip rooms between clean and dirty on the room board and tick off tasks floor by floor, while the desk books new stays with a live price and tax breakdown. It uses Bootstrap 5.3.8 and plain JavaScript, with charcoal, ivory and brass styling in both light and dark themes.
Key features
- Dashboard with occupancy, arrivals and departures, ADR and RevPAR cards and sparklines
- Stacked revenue-by-week chart in inline SVG, drawn from a data table with hover and keyboard tooltips
- Today’s arrivals list with filters and one-click check-in that updates the counts
- Reservations table with search, status, source and date-range filters, sorting and CSV export
- New-booking form with live price, tax, extras and deposit, plus validation and an in-page success state
- Tape chart of 48 rooms by 14 nights with floor and room-type filters and a booking detail dialog
- Room status board by floor with a clean/dirty switch, housekeeper select and live counts
- Guest profiles with contact details, preferences, front desk notes and stay history
- Housekeeping tasks by floor with progress rings, attendant workloads and a hide-completed toggle
- Light and dark themes, offcanvas sidebar on mobile and a property selector in the topbar
Best for
- Hotel, inn and boutique property management system front ends
- Front desk and housekeeping tools for serviced apartments or hostels
- Prototyping a PMS or channel manager before wiring up a backend
- Hospitality admin panels that need a calmer, premium look
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 7 pages: index.html, reservations.html, calendar.html, rooms.html, guests.html, housekeeping.html, login.html
- Charts and the tape chart are inline SVG and CSS, no chart library
- Light and dark themes from CSS custom properties, with the choice remembered
- Cormorant Garamond display and Manrope body type with tabular figures
- Free for personal and commercial use; attribution optional but welcome. Full terms: uicookies.com/license
How to use it
Unzip the folder and open index.html in a browser; there is no build step. Edit the copy in each HTML page and swap img/lobby.jpg for your own photo. Colours, fonts and radii live as custom properties at the top of css/style.css, for both themes. The forms validate in the browser only, so connect them to your booking system or a form service, then deploy to any static host.
Frequently asked questions
Is Frontdesk free for commercial projects?
Yes. Frontdesk is free for personal and commercial use, including client work. Attribution is optional but always welcome, and the full terms are at uicookies.com/license.
What is it built with?
Bootstrap 5.3.8 for layout and components, plus one vanilla JavaScript file. There is no jQuery and no chart library; the revenue chart, sparklines and tape chart are drawn with inline SVG and CSS.
Which pages are included?
Seven: a front-office dashboard, reservations with a new-booking form, a 14-night tape chart, a room status board, guest profiles, housekeeping tasks and a sign-in page. They share one sidebar, topbar and footer.
Do the booking and sign-in forms work?
They validate in the browser and show a success state, and a new booking is added to the table on the page. Nothing is sent to a server, so connect the forms to your property management system, booking engine or a form service.
Can I load real bookings into the tape chart?
Yes. The tape chart reads a JSON block at the bottom of calendar.html with rooms, bookings and out-of-order blocks. Replace it with data from your PMS or an API call and the chart, occupancy row and booking dialog render from it.
