Timeline structure
User rows
Each team member has a row showing:- Summary row (always visible)
- User avatar and name
- Job title
- Daily allocation badges
- Expand/collapse chevron
- Detail row (expandable)
- Task bars spanning date ranges
- Multiple lanes to prevent overlaps
- Color-coded by item type
Date columns
Dates displayed across the top:- Grouped by ISO week numbers
- Day and date for each column
- Today highlighted
- Friday columns have thicker borders
- Weekends included but grayed out
Viewing the timeline
Initial view
When you open the schedule:- Shows 6 months back + 6 months forward (365 days)
- All users grouped by work type (Development, Design, QA)
- Sorted alphabetically within each group
- Users collapsed by default
Expanding date range
To see more dates:- Click the left edge to load 3 months earlier
- Click the right edge to load 3 months later
- Timeline extends dynamically as needed
Expanding users
To see task details:- Click the chevron icon to expand a user’s row
- Task bars appear showing all scheduled work
- Click again to collapse
Task bars
Visual representation
Task bars display:- Icon - Item type (help desk, task, project, block, leave)
- Title - Task or ticket name
- Client - Client name (if applicable)
- Time - Hours allocated (in tooltip)
- Status badge - Current status
- Color - Based on status:
- Scheduled: Blue
- In Progress: Orange
- Awaiting Review: Purple
- Complete: Green
- Blocks: Violet
- Leave: Gray
Multi-day tasks
Tasks spanning multiple days:- Bar extends across all scheduled days
- Continuous bar from start to end date
- Weekends included in span
- Capacity allocated only on working days
Task lanes
Tasks assigned to lanes automatically:- Lane 0 - Leave and bank holidays (highest visual priority)
- Lane 1 - Help desk tickets
- Lane 2 - Blocks
- Lane 3+ - Subtasks (as many lanes as needed)
Lanes prevent visual overlaps. Multiple tasks on the same day appear in different lanes stacked vertically.
Allocation badges
Badge display
Each day shows an allocation badge with:- Hours allocated (e.g., “6.5h”)
- Color indicating capacity status:
- Green: 80-100% allocated
- Amber: Less than 80% allocated
- Red: More than 100% allocated
- Red ban icon: Leave or bank holiday
Badge interactions
Click a badge to:- Open day breakdown panel
- See detailed task list for that day
- View total capacity vs allocated time
- Reorder tasks (if PM/Manager)
Filtering schedules
Available filters
Filter the schedule by:Person
Show only specific team members
Client
Show only work for specific clients
Status
Filter by Scheduled, In Progress, Awaiting Review, Complete
Work Type
Filter by Development, Design, QA
Using filters
To apply filters:1
Open filter menu
Click Filter button or press Cmd/Ctrl + Shift + F
2
Select filters
Choose one or more filter options
3
Apply
Filters apply immediately
4
Clear
Click filter chips to remove individual filters
Filter chips
Active filters display as chips:- Show below the filter button
- Click “X” to remove individual filter
- Click “Clear all” to remove all filters
- Persist while navigating
Grouping options
By work type (default)
Users grouped by:- Development - Developers
- Design - Designers
- QA - QA team members
Focus mode
Focus on a single user:- URL parameter:
?focusUser=userId - Automatically expands that user’s row
- Other users remain collapsed
- Used for quick user-specific views
Special indicators
Leave and holidays
Visual indicators for unavailability:- Red ban icon - Bank holiday or full-day leave
- ½ indicator - Half-day leave (50% capacity)
- No tasks scheduled on these days
Empty days
Days with no scheduled work:- Show “0h” or blank badge
- Amber color if under-allocated
- Indicates available capacity
Overallocation
Days exceeding capacity:- Red badge
- Shows total hours (e.g., “8h”)
- Indicates scheduling issue
Timeline interactions
Scrolling
Navigate the timeline:- Horizontal scroll - Move through dates
- Vertical scroll - View more users
- Shift + scroll - Horizontal scroll (if touchpad vertical only)
Today marker
Current day highlighted:- Vertical line through timeline
- “Today” label in header
- “Today” button jumps to current week
Updating schedules
Real-time updates
Schedules update automatically:- Every 30 seconds
- When browser regains focus
- After any scheduling action
- Manual refresh not needed
Loading states
While loading:- Skeleton placeholders for user rows
- Loading spinner in header
- Previous data remains visible
The schedule uses optimistic updates - your changes appear immediately while saving in the background.
Best practices
Collapse users
Collapse users you’re not actively working with for cleaner view
Use filters
Filter by client or person when focusing on specific work
Check colors
Watch allocation badge colors to spot capacity issues
Jump to today
Use the “Today” button frequently to see current work
Expand date range
Load more dates when planning further ahead
Review conflicts
Red overallocation badges indicate scheduling conflicts