Skip to main content

FS Garage Kanban (FE) Overview

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

What is this?​

A drag-and-drop Kanban board for a project's tasks: six fixed columns (To Do, In Progress, In Review, In Testing, In Acceptance, Done), each grouping several underlying task statuses, with optimistic drag-and-drop reordering that survives a failed save by rolling back.

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 Kanban

Key Features​

  • Six-column board (components/ui/kanban/): KanbanBoard.jsx groups a project's tasks into columns via a fixed status-to-column map, renders them with KanbanColumn.jsx, and each task as a KanbanTaskCard.jsx.
  • Drag-and-drop reordering: Powered by @hello-pangea/dnd. Dropping a card computes a fractional order index (a midpoint between its new neighbors) rather than renumbering the whole column, and - if dropped in a different column - maps the destination column back to a concrete task status.
  • Optimistic updates with rollback: The UI reorders immediately on drop; if the backend save fails, the board silently reverts to the pre-drag state instead of leaving the UI and server out of sync.
  • Sub-ordering within a status group: Statuses that share a column (e.g. "In Review" covers Ready for Review, In Review, Ready for Staging, In Staging) get a derived sub-order so finer status detail isn't lost when several statuses collapse into one column.
  • Responsive board height: Board height is computed from available viewport space, accounting for a mobile bottom nav bar when present.

See Architecture for the exact ordering formulas.

Tech Snapshot​

LayerChoice
FrameworkNext.js App Router
Drag-and-drop@hello-pangea/dnd
Statestore/index.js (updateTask, updateTaskInStore), local optimistic state in KanbanBoard.jsx
BackendPocketBase tasks collection (shared with the rest of FS Garage's task views, no Kanban-specific schema)
Default branchdev

Same-repo, different features: Score Card, Gantt, 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​