Luxury Interface
How to navigate the updated shell — glass surfaces, collapsible analytics, icon rail shortcuts, and personalization that carries across web and mobile.
Shell layout
The Luxury UI uses a three-column mental model on desktop:
- Icon rail (narrow, leftmost) — persistent quick actions and personalization.
- Module sidebar — directory navigation for HRMS, Sales, or Project pages you have access to.
- Main canvas — page header, optional summary analytics strip, filters, and content (table, grid, kanban, or dashboard).
On mobile, the module sidebar collapses; the header exposes grid/list/create shortcuts where applicable.
Page header
Every main page shows:
- Workspace kicker — HRMS, Sales, or Project label above the page title.
- Page title — e.g. "Project List", "Time Sheet", "Bid Requests".
- Global search field — type and press Enter to open
/project/searchwith results across entities. - Dropdown panels — Tasks, Chat, Notifications (quick previews with links to full pages).
- Account menu — Profile, Settings, Sign out (or Microsoft logout when using SSO).
Module sidebar
Under Directories, expand HRMS, Sales, or Project to see permitted menu items. Items you cannot access are hidden entirely — not grayed out.
The company chip below the logo shows your default team name, helping you confirm organizational context.
Typical Project menu items
Dashboard, Project List, Team capacity, Accounts, Notes, Taskboard, Task Activity, Reports, Feedback.
Typical HRMS menu items
Dashboard, Employees, Attendance, Time Sheet, Invoice.
Typical Sales menu items
Bid Requests, Purchase Orders.
Icon rail
The narrow rail on the far left provides cross-module shortcuts:
| Icon | Action |
|---|---|
| Search | Opens global search page |
| Taskboard | Jump to kanban view |
| Calendar | Personal work calendar (access-controlled) |
| Notes | Quick notes overlay / Notes page |
| Chat | Messaging (access-controlled) |
| Files | File manager (access-controlled) |
| Palette droplet | Color theme picker |
| App config | Application configuration tree (admin) |
| Settings | Right sidebar with layout & font options |
| Today | Today activity sidebar |
| Avatar | User menu duplicate of header account |
Global search
- Type your query in the header search field.
- Press Enter to navigate to the search results page.
- Results are grouped by entity type; click a row to open the detail view.
Search respects your access permissions — you only see records your role allows.
Themes & color palettes
Twelve curated palettes change primary, accent, and soft background tokens across the entire app. Emerald is the default theme for this documentation site. Your choice is saved in browser storage (docs-lux-palette for this guide; the live app stores your palette preference separately and syncs to mobile).
Preview palettes
Click a swatch to preview — saved locally in this documentation site and synced with the live app key.
Available palettes
Indigo (default), Sapphire, Emerald, Rose, Midnight, Amber, Violet, Ocean, Sunset, Graphite, Crimson, Forest. Midnight and Graphite apply a darker shell treatment.
Change palette via: icon rail droplet, Settings right sidebar link, or the preview grid above (syncs with the live app).
Typography & layout settings
Open Settings from the icon rail to adjust:
- Font family — Inter (default), Source Sans 3, IBM Plex Sans, Plus Jakarta Sans, DM Sans, Roboto, Open Sans, Lato, Manrope, Montserrat, and more.
- Layout toggles — compact sidebar and related display preferences.
Font choice is stored in the app UI settings (browser local storage) and applied via data-lux-font on the document root.
Summary panels
List and dashboard pages open with a collapsible Lux summary section containing:
- KPI strip (counts, totals, percentages)
- Highlight / insight cards with stacked bar segments
- Stage flow or funnel diagrams (horizontal pipelines)
- Chart gallery (donut, bar, area, line panels — see Charts reference)
Collapse state is remembered per page in localStorage so your preference persists between visits.
List page controls
Most register pages (projects, employees, bids, etc.) share a filter bar:
- Team selection — multi-select checkbox menu to scope data
- Filter list… — free-text search within the current result set
- SHOW — status preset (Active, Archived, My projects, etc.)
- SORT — field and direction
- Date range — where applicable (projects, reports)
- Quick filter chips — one-click presets below the summary
- Grid / List toggle — switch table vs card grid
- Create — opens sidebar wizard or form (permission-gated)
Create wizards vs forms
Major create flows offer Wizard and Form modes via a toggle at the top of the sidebar:
- Project — 6+ steps: setup, client & study, service scope, fieldwork, compliance, team & estimates
- Purchase order — contract core, client, delivery scope, references
- Bid request — study basics, setup, screening, additional, quota
- Employee — profile, access, sign-in, organization, skills
Use Wizard for guided first-time creation; switch to Form for quick edits by experts.