Interface Tour
A comprehensive walkthrough of the Shyfts interface, covering navigation, layouts, and key UI elements across all user roles.
Interface Overview
Shyfts uses a modern, responsive interface with glassmorphism design. The interface automatically adapts based on your user role:
| Role | Primary Interface | Navigation Items |
|---|---|---|
| System Admin | Admin Dashboard | Companies, Users, Inbox |
| Company Manager | Manager Dashboard | Staff, Calendar, Analytics, Inbox |
| Staff Member | Staff Portal | Schedule, Timesheet, Leave Requests, Inbox |
Global Navigation Bar
The navigation bar appears at the top of every page (except authentication pages) and provides consistent access to all features.
Desktop Navigation
┌─────────────────────────────────────────────────────────────────────────┐
│ [C] Shyfts │ Dashboard Staff Calendar Analytics Inbox │ 🔔 👤 │
│ Logo │ Navigation Links (role-based) │ Actions │
└─────────────────────────────────────────────────────────────────────────┘
Source: src/components/navigation/GlobalNavigation.tsx:94-226
Navigation Components
| Component | Location | Purpose |
|---|---|---|
| Logo | Left | Returns to home/dashboard |
| Navigation Links | Centre | Role-based page links |
| Session Refresh | Right | Refresh authentication session |
| Documentation | Right | Opens docs.shyfts.app |
| Notification Bell | Right | View notifications |
| User Menu | Right | Profile, settings, logout |
Navigation by Role
System Admin Navigation:
// Source: src/config/navigationConfig.ts:24-29
case 'SYSTEM_ADMIN':
return [
{ href: '/admin', label: 'Admin Dashboard', icon: Activity },
{ href: '/admin/companies', label: 'Companies', icon: Building },
{ href: '/admin/users', label: 'Users', icon: Users },
{ href: '/messages', label: 'Inbox', icon: MessageSquare },
]
Company Manager Navigation:
// Source: src/config/navigationConfig.ts:31-38
case 'COMPANY_MANAGER':
return [
{ href: '/dashboard', label: 'Dashboard', icon: Activity },
{ href: '/dashboard/staff', label: terminology?.staff || 'Staff', icon: Users },
{ href: '/dashboard/calendar', label: 'Calendar', icon: Calendar },
{ href: '/dashboard/analytics', label: 'Analytics', icon: FileText },
{ href: '/messages', label: 'Inbox', icon: MessageSquare },
]
Staff Member Navigation:
// Source: src/config/navigationConfig.ts:40-47
case 'STAFF':
return [
{ href: '/staff', label: 'My Portal', icon: Activity },
{ href: '/staff/schedule', label: 'My Schedule', icon: Calendar },
{ href: '/staff/timesheet', label: 'Timesheet', icon: FileText },
{ href: '/staff/leave', label: 'Leave Requests', icon: FileText },
{ href: '/messages', label: 'Inbox', icon: MessageSquare },
]
Industry Terminology
Navigation labels adapt to your industry. For example, "Staff" may display as "Team Members" or another industry-specific term based on your company's configuration.
User Menu
The user dropdown menu provides quick access to account-related actions.
┌─────────────────────────┐
│ user@example.com │
├─────────────────────────┤
│ 👤 Profile │
│ ⚙️ Settings │
├─────────────────────────┤
│ 🚪 Logout │
└─────────────────────────┘
Menu Options
| Option | Action |
|---|---|
| Profile | View and edit your personal profile |
| Settings | Access system settings |
| Logout | Sign out with confirmation modal |
Source: src/components/navigation/GlobalNavigation.tsx:169-208
Logout Confirmation
When clicking logout, a confirmation modal appears to prevent accidental sign-out:
┌────────────────────────────────────────┐
│ Confirm Logout │
├────────────────────────────────────────┤
│ Are you sure you want to log out? │
│ Any unsaved changes will be lost. │
│ │
│ [Cancel] [Logout] │
└────────────────────────────────────────┘
Mobile Navigation
On mobile devices (screen width < 768px), the navigation transforms into a slide-out menu.
Mobile Menu Structure
┌───────────────────────┐
│ [C] Shyfts [X] │ Header with close button
├───────────────────────┤
│ 👤 User Name │ User info
│ user@email.com │
├───────────────────────┤
│ 📊 Dashboard │
│ 👥 Staff │ Role-based
│ 📅 Calendar │ navigation
│ 📈 Analytics │ links
│ 💬 Inbox │
├───────────────────────┤
│ 👤 Profile │
│ ⚙️ Settings │ Quick links
│ 📖 Documentation │
│ 🔔 Notifications │
│ 🚪 Logout │
├───────────────────────┤
│ Swipe left to close │ Footer hint
└───────────────────────┘
Source: src/components/navigation/MobileMenu.tsx:125-261
Mobile Menu Features
| Feature | Description |
|---|---|
| Touch Targets | All buttons are 44px minimum for easy tapping |
| Swipe to Close | Swipe left anywhere in the menu to close |
| Focus Trap | Tab key cycles within menu when open |
| Escape Key | Press Escape to close menu |
| Backdrop | Semi-transparent backdrop, tap to close |
// Source: src/components/navigation/MobileMenu.tsx:64-66
// Swipe left to close (threshold of 50px)
if (diffX > 50) {
onClose()
}
Opening Mobile Menu
Tap the hamburger menu icon (☰) in the top-right corner when on mobile:
// Source: src/components/navigation/GlobalNavigation.tsx:211-222
<Button
variant="ghost"
size="icon"
className="md:hidden text-white hover:bg-white/10"
onClick={onMenuClick}
aria-label={mobileMenuOpen ? "Close mobile menu" : "Open mobile menu"}
>
<Menu className="w-6 h-6" />
</Button>
Breadcrumbs
Breadcrumb navigation shows your current location and provides quick navigation to parent pages.
Desktop Breadcrumbs
Home > Dashboard > Staff > John Smith
Mobile Breadcrumbs
On mobile, breadcrumbs show only the last 2 items to save space:
Staff > John Smith
Source: src/components/navigation/Breadcrumbs.tsx:22-24
// Only show last 2 breadcrumbs on mobile
const mobileBreadcrumbs = useMemo(
() => breadcrumbs.length > 2 ? breadcrumbs.slice(-2) : breadcrumbs,
[breadcrumbs]
)
Breadcrumb Visibility
Breadcrumbs are hidden on:
- Authentication pages (login, password reset)
- Home page
- Pages with only one breadcrumb level
Dashboard Layouts
Company Manager Dashboard
┌─────────────────────────────────────────────────────────────────┐
│ Global Navigation Bar │
├─────────────────────────────────────────────────────────────────┤
│ Home > Dashboard │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────┐ │
│ │ Total Staff │ │ On Shift │ │ On Leave │ │ Pending │ │
│ │ 24 │ │ 12 │ │ 3 │ │ 5 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Today's Schedule │ │
│ │ Room 1: ████████░░░░████████░░░░ │ │
│ │ Room 2: ░░░░████████████████████ │ │
│ │ Room 3: ████████████░░░░░░░░████ │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ Pending Requests │ │ Recent Activity │ │
│ │ - Leave request │ │ - Shift assigned │ │
│ │ - Swap request │ │ - Staff clocked in │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Staff Portal Dashboard
┌─────────────────────────────────────────────────────────────────┐
│ Global Navigation Bar │
├─────────────────────────────────────────────────────────────────┤
│ Home > My Portal │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Welcome, [Name] [Clock In] button │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Today's Shift │ │
│ │ Room 1 - 09:00 to 17:00 │ │
│ │ Status: Scheduled │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Upcoming Shifts │ │
│ │ Tomorrow: Room 2 - 08:00 to 16:00 │ │
│ │ Wednesday: Room 1 - 10:00 to 18:00 │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ Leave Balance │ │ Timesheet Status │ │
│ │ Annual: 15 days │ │ Current week: │ │
│ │ Sick: 10 days │ │ Submitted ✓ │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
System Admin Dashboard
┌─────────────────────────────────────────────────────────────────┐
│ Global Navigation Bar │
├─────────────────────────────────────────────────────────────────┤
│ Home > Admin Dashboard │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────┐ │
│ │ Companies │ │ Total Users │ │ Active Now │ │ Pending │ │
│ │ 12 │ │ 156 │ │ 45 │ │ 3 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Company List │ │
│ │ ┌─────────────────────────────────────────────────────┐ │ │
│ │ │ ABC Medical │ GP Practice │ 24 staff │ Active │ │ │
│ │ │ XYZ Dental │ Dental │ 18 staff │ Active │ │ │
│ │ │ Main St Cafe │ Restaurant │ 12 staff │ Pending │ │ │
│ │ └─────────────────────────────────────────────────────┘ │ │
│ │ [+ Create Company] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Design System
Glassmorphism Style
Shyfts uses glassmorphism throughout the interface:
/* Source: Applied throughout components */
backdrop-blur-md bg-white/10 border border-white/20
| Element | Description |
|---|---|
| Blur | backdrop-blur-md creates frosted glass effect |
| Background | bg-white/10 provides subtle white overlay |
| Border | border-white/20 defines container edges |
Colour Palette
| Colour | Hex | Usage |
|---|---|---|
| Coral | #FFB5B0 | Primary accent, buttons |
| Coral Light | #FFC5C0 | Gradients, hover states |
| White | #FFFFFF | Text, icons |
| White/70 | rgba(255,255,255,0.7) | Secondary text |
| White/20 | rgba(255,255,255,0.2) | Borders, dividers |
Touch Targets
All interactive elements maintain 44px minimum size for accessibility:
// Source: src/components/navigation/MobileMenu.tsx:193
className="min-h-[44px]" // 44px touch target
Notification System
Notification Bell
The notification bell in the navigation shows unread notification count:
// Source: src/components/navigation/GlobalNavigation.tsx:166
<NotificationBell className="text-white/70 hover:text-white" />
Notification Types
| Type | Icon | Description |
|---|---|---|
| Shift Assigned | 📅 | New shift scheduled |
| Leave Approved | ✓ | Leave request approved |
| Leave Rejected | ✗ | Leave request rejected |
| Swap Request | 🔄 | Shift swap requested |
| Timesheet Due | ⏰ | Timesheet submission reminder |
Keyboard Navigation
Global Shortcuts
| Key | Action |
|---|---|
Tab | Move to next focusable element |
Shift + Tab | Move to previous focusable element |
Escape | Close modals and menus |
Enter | Activate focused button/link |
Mobile Menu Shortcuts
| Key | Action |
|---|---|
Tab | Cycle through menu items (trapped) |
Escape | Close mobile menu |
Source: src/components/navigation/MobileMenu.tsx:85-110
Responsive Breakpoints
| Breakpoint | Width | Behaviour |
|---|---|---|
| Mobile | < 768px | Mobile menu, simplified breadcrumbs |
| Tablet | 768px - 1024px | Desktop nav, responsive layouts |
| Desktop | > 1024px | Full navigation, maximum features |
Related Documentation
- First Login - Initial setup
- Common Tasks - Everyday actions
- Keyboard Shortcuts - Speed up your workflow
Source Files:
src/components/navigation/GlobalNavigation.tsx- Main navigation barsrc/components/navigation/MobileMenu.tsx- Mobile navigationsrc/components/navigation/Breadcrumbs.tsx- Breadcrumb navigationsrc/components/navigation/NavigationProvider.tsx- Navigation wrappersrc/config/navigationConfig.ts- Navigation configuration