Skip to main content

FS Garage Utilisation (FE) Overview

Next.js App Router frontend for FS Garage team utilisation: allocations, scorecard, work logs, and timesheet sync. Utilisation renders BE-computed snapshots (no FE metric math).

What is FS Garage Utilisation (FE)?​

Next.js App Router frontend for FS Garage team utilisation: allocations, scorecard, work logs, and timesheet sync. Utilisation renders BE-computed snapshots (no FE metric math).

FieldValue
CategoryCore / Utilisation
GitHubbase-fs-garage-fe
OrgTeamFleetStudio
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 Core

Key Features​

  • Utilisation scorecard UI: Main /utilization view with period controls, Fresh badge, Run Now, and Manage Allocations.
  • Allocations panel: Manage weekly planned hours inside the Utilisation shell (not a separate top-level app).
  • PocketBase client: Auth, CRUD, and custom hook routes via PocketBase JS SDK.
  • Timesheet bridge: Uses timesheet base URL + Garage bridge IDs; displays BE snapshots and sparklines.
  • Cloudflare deploy path: OpenNext Cloudflare scripts for preview/deploy (opennextjs-cloudflare).

Tech Snapshot​

LayerChoice
FrameworkNext.js App Router
UITailwind + shadcn/ui + Radix (Utilisation); some modules also use Mantine
Authmiddleware.js gate for app/(auth)/ routes
DataPocketBase JS SDK in lib/
TestsVitest + Playwright e2e
Default branchdev

Backend: fs-garage-base (PocketBase utilisation APIs).

Agent docs live in docs/ (ARCHITECTURE, DESIGN, STATUS, UX, etc.).

Metrics​

This FE repo renders scorecard numbers; it does not own business formulas.

Full metric catalog (formulas, badges, key actions):
FS Garage Utilisation - Metrics and Calculations

Project-level overview (FE + BE together):
FS Garage Utilisation - Project Overview

Quick Start​

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

Then follow Getting Started.

Next Steps​