IT Portfolio & Roadmap Workspace

Summary

A portfolio-management workspace over live issue-tracker data: a Gantt timeline, a what-if scenario planner across six milestone dates per initiative, a top-priority board, and a portfolio analytics dashboard. The planning surface supports per-field undo and a dedicated scenario mode for testing uncommitted changes, and the analytics layer runs on roughly 27,000 lines of feature-first TypeScript.

Architecture

• The timeline is modelled as a fixed thirty six slot biweekly grid addressed by index arithmetic rather than as a continuously scaled date axis, which makes slot position a pure function of a date and keeps every row aligned to the same columns without a layout pass.
• The timeline is rendered as an ordinary HTML table rather than by adopting a charting or Gantt library, which keeps the editable planning grid and the bar rendering inside one DOM structure so column widths and row alignment cannot drift apart.
• Two different column resize behaviours, one that borrows width from the neighbouring column and one that resizes independently, are implemented once as shared primitives and reused by three separate large tables, each persisting its widths under its own key.
• The application ships no data fetching or caching library. Every view holds its results in plain component state and recomputes derived figures through standalone aggregation functions, which keeps the analytics layer testable without a cache or a provider in the way. Verified by the absence of any such import across the source tree.

Highlights

• In-place planning surface with per-field undo, per-row sync status, session-persisted unsaved work, and a scenario mode isolating uncommitted changes.
• The entire analytics layer extracted into pure, independently testable functions: risk RAG normalization, success rate, scope reconciliation, delay detection, root-cause breakdown.
• Source-data inconsistencies (multiple textual forms of the same planning year) normalized at the boundary.
• ~27,000 lines of feature-first TypeScript, organized by feature rather than by layer.
• Planning date changes are validated server side before they reach the upstream tracker, with failures returned as structured errors rather than a generic failure.
• Filter options for planning year and programme manager are derived server side from the live issue set rather than maintained as a static list that drifts out of date.
• Priority ranked and per user issue views are separate server side projections, so the client never fetches the full portfolio and filters it in the browser.

Technologies

• Python
• FastAPI
• Azure Functions
• Azure Cosmos DB
• React 19
• TypeScript
• Vite
• Chart.js
• MSAL