FS Garage Score Card (FE) Overview
The Score Card frontend inside base-fs-garage-fe, built by Thanush Babu. This is a different module from FS Garage Utilisation (FE), which lives in the same repo but was built by a different contributor. Thanush's other frontend work in this same repo - Kanban and Gantt - is documented separately, since they're unrelated features (task board and timeline, not metrics).
For the project-level picture (FE + BE together) and every calculation formula, start at FS Garage Score Card - Project Overview.
What is this?
The UI and calculation layer for FS Garage's per-project Score Card: custom metric categories, metrics, and time-series entries, rendered as KPI cards, funnels, or bar lists, plus a Manage Data screen and a shareable snapshot export.
| Field | Value |
|---|---|
| Category | FS Garage |
| GitHub | base-fs-garage-fe |
| Org | TeamFleetStudio |
| Built by | Thanush Babu (this module only - repo also contains the Utilisation module) |
Runtime setup, env vars, and deploy steps live in the repository. Use this Fleet Docs page for knowledge-transfer context.
Key Features
- Project Score Card (
app/(auth)/project/[id]/score): Per-project scorecard with custom metric categories, metrics, and time-series entries, rendered as KPI cards, funnels, or bar lists. Includes health status (badge/pill/selector), a combined health + quick-entry control bar, cross-cadence target auto-suggestion, snapshot export/sharing, restricted-metric visibility for leadership/owners only, and an empty state for projects with no metrics yet. - Calculation library (
lib/scorecard/*.js): A dedicated set of pure, unit-tested functions - containment roll-up, delta/momentum, target-vs-value percentage, cross-cadence target auto-suggestion, health-status severity ranking, overlap and delete/archive guards, and role-based restriction cascades. Full formulas: Metrics and Calculations. - Manage Data view (
score/manage-data): Dedicated screen for creating/editing metric categories and metrics (CategoryForm,MetricForm) and quick, auto-saving data entry (useQuickEntry,EntriesModal), with its own empty state (ManageDataEmptyState). - Snapshot export: Renders a shareable, paginated snapshot of the current scorecard view, computed with the same formulas as the live view and safe to share externally.
- Project listing momentum: A per-project sparkline on the projects list, averaging each project's headline-KPI value-vs-target percentage over the last 4 weeks.
- Test infrastructure: Introduced Vitest + React Testing Library for the scorecard component and calculation-library suite (
CategoryForm.test.jsx,EntriesModal.test.jsx,HealthStatusSelector.test.jsx,rollup.test.js,delta.test.js,targetPolicy.test.js, etc.).
Also in this repo (not Score Card)
Thanush also built the following in base-fs-garage-fe, unrelated to the Score Card's metrics but worth knowing about when working in this codebase:
- PWA setup: Installable app shell -
public/manifest.json, service worker (public/sw.js), and client-side registration (components/PWARegister.jsx). - Notifications bell (
components/NotificationsBell.jsx) and shared login/nav shell work (login-form.jsx,NavBar.jsx) used across the FS Garage FE. - Kanban board and Gantt view - documented in their own KT pages.
Tech Snapshot
| Layer | Choice |
|---|---|
| Framework | Next.js App Router |
| State | store/index.js (scorecard fetch/derive helpers: fetchProjectScorecard, fetchHeadlineMetrics) |
| Tests | Vitest + React Testing Library |
| Default branch | dev |
metric_categories / metrics / metric_entries are captured as PocketBase migrations in fs-garage-base (an earlier gap-analysis doc flagged them as missing; that's since been closed by the created_metric_categories/created_metrics/created_metric_entries migrations). One FE/BE naming difference to know about: the PocketBase field is metrics.frequency, translated to default_granularity at the store/index.js API boundary for the rest of the FE codebase - see FS Garage Score Card (BE) for the full field reference.
Related Repo
Backend: fs-garage-base - Score Card PocketBase collections and migrations, see FS Garage Score Card (BE).
Same-repo, different module: FS Garage Utilisation (FE), Kanban, Gantt.
Quick Start
git clone https://github.com/TeamFleetStudio/base-fs-garage-fe.git
cd base-fs-garage-fe
Then follow Getting Started.
Next Steps
- Getting Started - Install and run locally
- Architecture - System shape and data flow
- API Reference - Endpoints and integrations
- Metrics and Calculations - every formula