Dashboard demos

Six ways to run the HL back-office. Same data, same pages, different layouts. Pick one, then compare.

Preview with sample data. Nothing is saved.

1
Sidebar

The original: a grouped sidebar and a home with KPIs, an action queue and the calendar.
Good for
- Familiar layout, every section one click away
- Collapsible rail keeps 27 items manageable
- Home shows numbers, queues and the schedule together
Trade-offs
- Sidebar takes width on small laptops
- Home is dense for occasional users
Pages
2
Calendar home

The home page is a full-width calendar, with filters on the left and what needs action on the right.
Good for
- Built for planners: the schedule is the first thing you see
- Filters and queues stay visible while you browse weeks
Trade-offs
- Less room for KPIs
- Three columns collapse into tabs on phones
Pages
3
Top navigation

No sidebar: a mega-menu with every section, an airy card home and a tab bar on phones.
Good for
- Full page width for tables and forms
- Phone-friendly with a thumb-reachable tab bar
Trade-offs
- Deep pages are one extra click away
- The mega-menu hides the full map until opened
Pages
4
Command center

A dense operations view with light and dark mode, a KPI strip and every queue side by side.
Good for
- See all queues at once and act without leaving the page
- Dark mode for long shifts
Trade-offs
- Dense: best for daily power users
- Small text needs a large screen
Pages
5
Inbox

Everything to handle in one list, the selected item on the right, and keyboard shortcuts.
Good for
- Fastest triage: one list, one place to act
- Keyboard shortcuts for every common action
Trade-offs
- List-centric: less overview of numbers
- Shortcuts take a little learning
Pages
6
Minimal

A calm, simple interface with a large search, few colours and big touch targets.
Good for
- Easy for non-technical staff
- Large text and targets, very accessible
Trade-offs
- Shows fewer things at once
- More scrolling on big screens
Pages

Differences

Demo	Navigation	Position	Font	Radius	Main background	Home layout
1. Sidebar	Grouped sidebar with collapsible rail	Left, 264 px, white	Outfit	16 px	#F7F8FA	KPI cards, action queue, today’s lessons, calendar, upcoming lessons
2. Calendar home	Icon-only rail with section flyouts	Left, 64 px, navy	Plus Jakarta Sans	8 px	#F1F5F9	Full screen: filters and mini month · week calendar · action rail
3. Top navigation	Six text menus with full-width mega-menus	Top, 72 px, white	DM Sans	20 px	#FFF8F0	Hero greeting with big search, 4 KPI cards, today’s lessons \| action required
4. Command center	Dark sidebar with uppercase section headers	Left, 220 px, dark	Inter + JetBrains Mono	4 px	#0B0F14	KPI strip with sparklines, 5 kanban queue columns
5. Inbox	Email-style folders + item list	Left, 200 px folders + 420 px list	Source Sans 3	6 px	#FFFFFF / #F7F7F8	Unified task inbox with detail pane
6. Minimal	Six big sections, sub-pages as tabs	Left, 240 px, light	Nunito	24 px	Pastels on white	Six big action tiles, then a simple Today list