Gantt View
Navigate and use the ArchiJAM timeline — zoom, sort, filter, group by, columns, milestones, and the lights toggle.
Gantt View
The Gantt view (/gantt) is the primary interface: a full-viewport interactive timeline of all projects. The left panel lists projects and phases; the timeline scrolls horizontally while the left panel and header stay fixed.
On load, the timeline auto-scrolls to position today at approximately 30% from the left edge.
Toolbar
The Gantt toolbar has two rows.
Row 1 — Gantt controls
Zoom A slider control adjusting pixels-per-day (range 2–60, default 12). Slide right to expand the timeline and see more detail per day; slide left to compress it and see a longer date range at once.
Expand All / Collapse All Chevron icon buttons that toggle all project rows simultaneously. Expanded projects show their phase rows; collapsed projects show a single row.
Sort By
Inline buttons: # (project number), Name, Start, End. Click a button to sort ascending; click again to toggle to descending.
Lights A toggle. When Lights Off is active, all phase bars except those overlapping today are dimmed to ~15% opacity. This makes it easy to see which projects are currently active on the timeline.
Row 2 — ViewBar
Filter presets
Active | On Hold | Closeout | All | Archived
The Active preset is the default. Selecting Archived or All loads archived projects from the server (they are excluded from the default fetch for performance).
Group By Organizes projects into labeled sections. Options:
- No Grouping
- By Status
- By Current Phase
- By Project Manager
- By State
- By Market Sector
- By Scope Type
Group-header rows appear in both the left panel and the timeline. Each header shows the group label, project count, and a subtle accent background.
Columns Toggles optional left-panel columns:
| Column | What it shows |
|---|---|
# Number | Project number badge on project rows |
PM | Project manager avatar on project rows |
Risk | At-risk warning icon (⚠) on project rows |
Phase Dates | Start → end date range on phase rows |
Search Real-time text filter across project name and project number.
Custom Filter Opens a filter slide-over for building arbitrary filter conditions: name, number, status, current phase, PM, state, city, scope type, start date, end date. Filters can be named and saved for reuse. Saved filters appear as preset buttons in the ViewBar for quick access.
Left panel
Fixed-width (320 px), sticky. Contains three row types:
Group-header rows (when Group By is active) A section divider showing the group name in bold and project count.
Project rows
- Expand/collapse chevron
- At-risk icon ⚠ (column-toggleable, red)
- Project number (column-toggleable)
- Project name (always visible)
- PM avatar with initials (column-toggleable)
Phase rows (shown when a project is expanded)
- Color swatch
- Phase name
- Date range (column-toggleable)
Phase rows have no bottom divider between them. A borderTop divider separates each project row.
Timeline
Header (3 sticky rows)
- Year row — year labels that stick within their span as you scroll right
- Month row — month labels with vertical grid lines
- TODAY row — an amber vertical line with a "TODAY" label centered on the line
A ← TODAY / TODAY → button appears in the toolbar when today is off-screen. Click it to scroll back to today's position.
Phase bars Each phase is drawn as a colored bar spanning its start and end dates. The bar color comes from the phase type definition in System Settings.
Milestone markers Diamond shapes (◆) on the timeline at each milestone's calculated date. Hovering a milestone shows a tooltip with the milestone name, date, and days remaining.
Phase tooltip Hovering a phase bar shows: phase name, start and end dates, days remaining, time elapsed %, and task completion %.
Footer legend A row below the timeline showing each phase type's abbreviation and color swatch — a reference key while reading the chart.
At-risk indicator
Projects where time elapsed exceeds task completion by more than 20 percentage points are flagged:
- The at-risk icon (⚠) appears on the project row in the left panel (when the Risk column is enabled)
- The project name is styled in red
- The At Risk filter preset in the Dashboard stat cards links here
Keyboard and scroll behavior
The left panel and timeline share a single unified scroll container — there is one horizontal scrollbar at the bottom. Scrolling horizontally moves the timeline while the left panel stays fixed. Scrolling vertically moves both panels together.
Permissions
All authenticated users can view the Gantt. The Gantt is read-only in this version — date editing via drag-and-drop on the timeline is planned for a future release. Phase dates are edited through the project detail page.