Skip to main content

FS Garage Gantt (FE) Overview

The Gantt timeline view inside base-fs-garage-fe, built by Thanush Babu. Lives in the same repo as Score Card and Kanban but is an unrelated feature - a task timeline, not a metrics surface - documented on its own page to keep each feature's docs short and findable.

What is this?​

A custom-built timeline of a project's tasks and milestones (components/ui/gantt/), with zoomable day/week/month views and a planned-vs-actual overlay that visually distinguishes on-time progress from early starts and late finishes.

Not the Milestone page

This repo has a second, separate timeline - app/(auth)/project/[id]/milestone/page.js - built on the vendored frappe-gantt library (public/frappe-gantt.*). That page has mixed authorship (harini-kk is the top contributor there) and isn't documented here. This page covers only the Gantt tab rendered by components/ui/gantt/GanttView.jsx (app/(auth)/tasks/page.js and app/(auth)/project/[id]/page.js), which Thanush built from scratch with no external Gantt library.

FieldValue
CategoryFS Garage
GitHubbase-fs-garage-fe
OrgTeamFleetStudio
Built byThanush Babu
Source of truth

Runtime setup, env vars, and deploy steps live in the repository. Use this Fleet Docs page for knowledge-transfer context.

Knowledge Transfer Gantt

Key Features​

  • Zoomable timeline (GanttView.jsx, GanttControls.jsx): Day / Week / Month zoom levels, each with its own pixel-per-day scale, so the same date range renders at different levels of detail.
  • Auto-sized timeline window: The visible date range is derived from the earliest/latest planned or actual date across all tasks and milestones (padded on both sides), not a fixed calendar window - see Architecture for the exact formula.
  • Planned-vs-actual bar overlay (GanttBar.jsx): A task with both planned and actual dates renders as up to four colored segments - on-time overlap, an early-start portion, a late-end portion, and the planned outline - rather than a single bar, so schedule variance is visible at a glance.
  • Grouped rows with collapse (GanttGroupHeader.jsx): Tasks group under milestones (or "Unassigned"), each group showing a task count and, where applicable, a milestone status badge; groups collapse/expand independently.
  • Resizable, collapsible sidebar: The task-list pane can be dragged wider/narrower or collapsed to an icon rail, with width constrained to stay on-screen on resize/orientation change.
  • Today marker: A vertical line positioned with the same date-to-pixel formula used for task bars.

Tech Snapshot​

LayerChoice
FrameworkNext.js App Router
RenderingCustom canvas-free DOM/CSS positioning (absolute-positioned divs, not an external Gantt library)
BackendPocketBase tasks / milestones data (shared, no Gantt-specific schema)
Default branchdev

Same-repo, different features: Score Card, Kanban, Utilisation (different contributor).

Quick Start​

git clone https://github.com/TeamFleetStudio/base-fs-garage-fe.git
cd base-fs-garage-fe

Then follow Getting Started.

Next Steps​