# PMO Prototype Suite for GitHub Pages *Version 0.1 – scaffold only* --- ## 0 Overview This repository contains **four lightweight, client-side web apps** that can be published straight to **GitHub Pages** (no server, no build step). Each is a self-contained folder with a single *index.html*, minimal CSS, a tiny JSON file with mock data, and vanilla JavaScript that calls Chart.js or D3 from public CDNs. The goal is to give your client a tactile proof-of-concept they can click through today while leaving plenty of runway for richer React or API-driven versions later. ``` repo-root/ │ README.md ← this file ├─ controls-command-board/ │ │ index.html │ └─ data.json ├─ decision-latency-tracker/ │ │ index.html │ └─ data.json ├─ lessons-synthesiser/ │ │ index.html │ └─ lessons.json ├─ org-heatmap-tracker/ │ │ index.html │ └─ heatmap.json └─ landscape-diagram/ └─ controls-landscape.md (Mermaid) ``` Deploy by pushing to the **main** branch and enabling GitHub Pages → *Deploy from branch* → */ (root)*. Each folder is then reachable at: ``` https://.github.io//controls-command-board/ ``` --- ## 1 Integrated Controls Command Board (ICC Board) ### Purpose Single-screen fusion of **baseline vs actual cost/schedule**, **FTE utilisation**, and **process efficiency KPIs**. ### index.html (excerpt) ```html Integrated Controls Command Board

Integrated Controls Command Board

``` ### data.json (sample) ```json { "periods": ["Jan","Feb","Mar","Apr"], "baseline": [20, 40, 60, 80], "actual": [22, 39, 65, 90], "fte_planned": [120,130,140,150], "fte_actual": [118,135,150,160], "efficiency": [84,78,91,87] } ``` --- ## 2 Decision Latency Tracker Tracks the elapsed time from **first signal → decision closure** for change requests, risk mitigations, and approvals. ### index.html (excerpt) ```html

Decision Latency Tracker

``` ### data.json ```json { "items": [ {"name":"CR‑001 Budget Shift","days":14}, {"name":"Risk Mit A27","days":9}, {"name":"Design Change P45","days":21} ]} ``` --- ## 3 Lessons-to-Action Synthesiser Searchable catalogue of lessons, tagged by gateway, theme, and discipline, with quick copy-to-clipboard summaries. ### index.html (excerpt) ```html

Lessons-to-Action Synthesiser

``` ### lessons.json (sample) ```json [ {"tag":"Gateway 2","text":"Define risk appetite early and agree contingencies."}, {"tag":"Procurement","text":"Involve commercial early to avoid long‑lead items."} ] ``` --- ## 5 Organisational Heatmap & Efficiency Tracker Maps teams vs processes with colour-coded utilisation; supports hover drill-downs. ### index.html (excerpt) ```html

Org Heatmap & Efficiency

``` ### heatmap.json (sample) ```json { "teams":["Design","Commercial","PMO"], "processes":["Reporting","Change","Risk","Assurance"], "values":[[85,70,60,55],[60,90,45,50],[40,60,95,80]] } ``` --- ## 6 Digital Controls Landscape Diagram Render with [Mermaid](https://mermaid.js.org) (works offline via `https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs`). ```mermaid graph LR CoreData[(Core Data Layer)] ICC[Integrated
Controls Board] DLT[Decision
Latency Tracker] LTA[Lessons Synthesiser] OHT[Org Heatmap] PMOUsers((PMO Users)) CoreData --> ICC CoreData --> DLT CoreData --> LTA CoreData --> OHT ICC --> PMOUsers DLT --> PMOUsers LTA --> PMOUsers OHT --> PMOUsers ``` Embed this Markdown file anywhere in the repo (or copy its SVG export) to show the end-to-end ecosystem. --- ## 7 Why this stack? * **Zero backend** – runs entirely on GitHub Pages, perfect for secure air-gapped demo. * **CDN-loaded libs** – Chart.js & D3 keep pages lightweight (<100 kB each). * **Progressive enhancement** – swap JSON mocks for live API calls later, or wrap in React/Vite for larger deployments. * **Human-first design** – each app surfaces insights that remove toil and support better judgement, aligning with the client’s ‘intelligence fusion cell’ vision.