HotelDash – Resort & Multi-Property Admin Dashboard HTML Template
76 pages. 97 parts. English and Arabic with full right-to-left format. Mild and darkish themes. Plain HTML, CSS and JavaScript. Figma supply included.
HotelDash is an admin dashboard template for resorts, resorts and multi-property reserving platforms. It covers the entire again workplace: bookings and the provision calendar, rooms and stock, properties, visitors and evaluations, occasions, web site content material, places and taxes, advertising and marketing, employees and permissions, 19 stories and settings. There isn’t any framework, no construct step and no package deal set up: serve the folder and each web page works.
Stay demo: hoteldash-ten.vercel.app
Demo Directions
Signal-in is simulated, so the sign-in pages settle for any well-formed enter:
- Login: any legitimate e mail (for instance [email protected]) and any password
- Two-factor and verification codes: any 6 digits (for instance 123456)
- New password: any password of 8 or extra characters, typed twice
You can too open any web page straight. Within the header you possibly can swap the language (English or Arabic, which turns the format right-to-left), the theme (Mild, Darkish, System), and the department and nation, which modifications the demo numbers and the foreign money. Add ?state=loading, ?state=empty or ?state=error to any web page tackle to see that state. Modifications you make within the demo final till you reload the web page.
Why HotelDash
- No framework, no construct step. Plain HTML, CSS and native JavaScript modules. It runs on any static host and matches into any backend or framework.
- Constructed for actual APIs. Each web page reads and writes knowledge by means of small service capabilities that return Guarantees. To attach your API you alter one operate per space; pages and parts keep as they’re.
- Each state is designed. Each desk, card and chart has loading, empty and error states, with a Attempt once more button on errors.
- One design system. Colors, sort, spacing, radius, shadows and movement are design tokens taken from the Figma file, so restyling the entire template begins in a single folder.
- English and Arabic inbuilt. Each web page, desk, type, toast and report is translated, with a full right-to-left format and a bundled Arabic font. One English supply and one dictionary per language, so including a language is a brand new dictionary, not a brand new set of pages.
- Mild and darkish themes. All parts use semantic color tokens and logical CSS properties, so the darkish theme and right-to-left format cowl each web page.
- A element library you possibly can copy from. One web page reveals all 97 parts with reside previews, copyable HTML and JavaScript, an API desk and accessibility notes.
76 Pages
Dashboard: Dashboard with KPIs, charts and up to date bookings, first-run Setup Guidelines, Notifications, Admin Profile
Bookings: All Bookings, Reserving Particulars with PDF bill, Availability Calendar (timeline and room grid), At present’s Examine-ins, At present’s Examine-outs
Rooms: Room Varieties, Room Kind Particulars, All Rooms, Room Particulars, Room Stock by ground with a room generator
Properties: All Properties, Property Particulars, 8-step Add Property wizard, Property Varieties, Property Guidelines, Services & Facilities, Registration Fields
Visitors: Prospects, Buyer Particulars, Handbook Refunds, Person Queries, Visitor Opinions
Occasions: Occasions, Occasion Inquiries
Content material: Handle Homepage, About Web page, Blogs, Weblog Classes, Assist & Help FAQs, Authorized Insurance policies with a wealthy textual content editor
Areas: Nations, Cities, Metropolis Particulars, Currencies, Taxes, Cancellation Insurance policies
Advertising and marketing: Banners, Promo Codes, Push Notifications, Refer & Earn
Employees: Employees Administration, Roles & Permissions with a permission matrix
Reviews (19): All Reviews plus Reserving, Cancellation, Fee, Buyer, Buyer Pockets, Suggestions & Score, Finance Abstract, Login, Notification, Associate, Associate Payout, Property, Property Verification, Refer & Earn, Refund, Income, Tax and Transaction stories
Account and different: Settings, Login, Two-Issue, Forgot Password, OTP Verification, New Password, Password Reset Success, two onboarding steps, 404, UI Parts and a clean starter web page
Options
- English and Arabic, switched from the header: Arabic interprets the entire admin and turns the format right-to-left; dates comply with the language
- Mild, darkish and system themes, switched from the header and remembered within the browser
- Department and nation swap with per-branch demo knowledge and foreign money
- Reusable DataTable: search, filters, sorting, paging, row choice with bulk actions, column visibility, CSV export, totals row, expandable rows, editable cells, drag-and-drop rows and stacked playing cards on telephones
- 9 SVG charts (space, line, grouped, stacked, horizontal and diverging bar, gauge, donut, sparkline) with loading states and animated updates, no chart library
- Occasion calendar (month, week, day, agenda), availability timeline, room grid and digital checklist for lengthy lists
- Varieties: customized choose, multi-select, combobox, date, date vary and time pickers, sliders, tag, quantity and score inputs, file add, wealthy textual content editor, validation with an error abstract, repeaters and wizards
- Modals, drawers, backside sheets, popovers, dropdowns with submenus, tooltips, toasts, alerts and banners
- Command palette (Ctrl Okay / Cmd Okay) to look each web page and motion
- PDF invoices and CSV exports created within the browser, with out libraries
- Loading, empty and error states on each knowledge part
- Responsive from 375px to 1920px, with contact targets of at the very least 44px
- Keyboard and display screen reader help, and reduced-motion help
- Installable app (PWA) that opens visited pages offline
- Share previews (Open Graph and Twitter playing cards) on each web page
- Inter, Outfit and IBM Plex Sans Arabic fonts and 1,500+ icons bundled domestically, with no requests to a CDN
Necessities
- A present model of Chrome, Edge, Firefox or Safari
- Any native static net server for improvement: VS Code Stay Server,
npx serve,python -m http.serverorphp -S(pages opened straight from disk can not load their scripts) - No npm packages or construct instruments are wanted. Node.js 18 or newer solely to rebuild the stylesheet after enhancing the CSS sources
Tech Stack
HTML5 · CSS (customized properties, logical properties) · JavaScript (native ES modules) · Phosphor Icons · Quill wealthy textual content editor · Inter and Outfit fonts
What You Get
- The HotelDash template: 76 pages, 50 reusable HTML parts, CSS sources and the constructed stylesheet (readable and minified), JavaScript, demo knowledge, fonts, icons and placeholder photographs
- Figma design file of HotelDash
- Offline documentation in HTML and PDF, with screenshots
Documentation
The obtain contains offline documentation in HTML and PDF (Documentation/). It covers:
- Set up, step-by-step for non-technical consumers and builders, with 3 ways to run the template and the results of every step
- Customise: model colors, darkish theme colors, fonts, brand, menu, share photographs, foreign money and date codecs, and demo knowledge
- Languages, darkish mode and RTL: how the switches work, the best way to set a default, the best way to translate new textual content and add one other language, and the best way to modify darkish colors
- Simulated options: what the demo simulates and the best way to join your personal API
- Parts: markup, choices and occasions for each element, plus the HTML, CSS and JavaScript structure
- Screenshots, folder construction, including a web page or element, the installable app, accessibility, browser help, credit and FAQ
Vital Notice
HotelDash is a front-end admin template. It does not embody a backend, database, actual sign-in, fee processing or reside API. All pages learn native demo knowledge by means of service capabilities, so each display screen is browsable instantly, and the service layer makes it simple to attach your personal API.
Signal-in, two-factor and password restoration, saving and deleting data, file uploads, refunds and sending notifications are simulated: nothing is distributed to a server. PDF invoices and CSV exports are created within the browser. No third-party providers or API keys are wanted.
AI Disclosure
AI-assisted instruments have been used in the course of the improvement of this merchandise, to assist write and overview elements of the code and the documentation. All the things was reviewed, examined and finalised by our group. The template itself has no AI-powered options and sends no knowledge to any AI service.
Credit
- Phosphor Icons, MIT License (license file included)
- Lit (contained in the Phosphor package deal), BSD-3-Clause License (license file included)
- Quill wealthy textual content editor, BSD-3-Clause License (license file included)
- Inter, Outfit and IBM Plex Sans Arabic fonts, SIL Open Font License 1.1 (license information included)
- Room, property, occasion and avatar photographs are placeholders made for HotelDash; change them with photographs you personal earlier than publishing
Changelog
Model 1.0.0 – Preliminary launch
Help
Merchandise help is supplied in step with Envato’s Merchandise Help Coverage. If in case you have a query earlier than or after buy, get in contact by means of the merchandise help tab.
If HotelDash helped you ship quicker, a score is genuinely appreciated. Thanks on your help!
