@

docs(wiki): add Planned Features section; house Reports mockup under it

- New Planned/ folder with a Planned-Features overview page.
- Move Reports-Mockup into Planned/ and commit its screenshots (images/).
- Sidebar: new Planned/ section; link it from Home and Design System.
- Ignore Obsidian editor config (.obsidian/) in the wiki repo.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@

.gitignore

@@ -0,0 +1,2 @@
+# Obsidian editor config — not part of the published wiki
+.obsidian/

Home.md

@@ -34,6 +34,7 @@ This wiki is the project's living reference. It is synthesised from the in-repo
 - **Who can do what?** → [Roles and Permissions](System/Roles-and-Permissions)
 - **What's been built?** → [Feature Catalogue](Product/Feature-Catalogue) · [Pages and Navigation](Product/Pages-and-Navigation) · [Workflows](Product/Workflows)
 - **Designing UI?** → [Design System](Product/Design-System)
+- **What's coming?** → [Planned Features](Planned/Planned-Features)
 - **Operating it?** → [Deployment and Operations](Ops/Deployment-and-Operations) · [Issue-to-Deploy Pipeline](Ops/Issue-to-Deploy-Pipeline)
 - **Unsure of a term?** → [Glossary](Overview/Glossary)
 

Planned/Planned-Features.md

@@ -0,0 +1,23 @@
+# Planned Features
+
+Work that is **designed but not yet shipped** — proposals, mockups, and post-MVP
+ideas. Nothing on these pages is wired to the database or live in the product;
+they exist to align on scope and UX before implementation. For what *is* shipped,
+see the [Feature Catalogue](Product/Feature-Catalogue).
+
+## Reports (spend reporting)
+
+A post-MVP **Reports** section for spend analysis across **cost centres**
+(vessels and sites) and the **3-level accounting-code** hierarchy — KPI tiles,
+comparison/trend charts, drill-downs, and a pinned filter toolbar (granularity,
+financial year, Top-N scope).
+
+→ **[Reports — UX Mockup](Planned/Reports-Mockup)** — annotated screens of the
+proposed layout and navigation, with a link to the interactive
+`reports-mockup.html`.
+
+---
+
+*Add new planned features here as they are designed. When a planned feature
+ships, move its page out of `Planned/` into the relevant section and record it in
+the [Changelog](Overview/Changelog) and [Feature Catalogue](Product/Feature-Catalogue).*

Planned/Reports-Mockup.md

@@ -0,0 +1,82 @@
+# Reports — UX Mockup
+
+A UX mockup of the planned **Reports** section of PPMS. It illustrates the
+proposed layout, navigation, and chart treatments for spend reporting across
+**cost centres** (vessels and sites) and the **3-level accounting-code**
+hierarchy.
+
+> **This is a non-functional mockup.** All figures, vessel names, and
+> accounting codes are illustrative sample data generated in the browser — not
+> real spend. It exists to align on UX before implementation; nothing here is
+> wired to the database. The live, clickable version is the standalone file
+> `reports-mockup.html` (see [Interactive version](#interactive-version) below).
+
+## Shared shell
+
+Every report screen uses the same frame: the PPMS sidebar, a breadcrumb header,
+and a pinned filter toolbar offering **Granularity** (Yearly / Monthly /
+Weekly), **Financial Year**, and a **Show** scope (Top 5 / Top 10 / Bottom 5 /
+All). Filters persist as you move between the index and detail views.
+
+## Cost Centres — comparison (monthly)
+
+The landing view. Compares spend across cost centres for the selected period,
+with KPI tiles (total spend, count, highest spender, YoY change), a multi-line
+comparison chart, and a sortable table with per-row trend sparklines. Each row
+links to that cost centre's report; rows can be ticked and sent to a custom
+graph.
+
+![Cost Centres — monthly comparison](images/reports-mockup/01-cost-centres-monthly.png)
+
+## Cost Centres — year-over-year (yearly)
+
+Switching Granularity to **Yearly** swaps the period filter for a financial-year
+scope and recasts the comparison as year-over-year bars across the available
+financial years.
+
+![Cost Centres — yearly comparison](images/reports-mockup/02-cost-centres-yearly.png)
+
+## Cost Centre report (detail)
+
+Clicking a cost centre opens its report: period KPIs, a spend-trend chart, and a
+**Top accounting codes** breakdown that can be re-pivoted by tier (Heading /
+Sub-heading / Leaf) and Top-N.
+
+![Cost Centre detail report](images/reports-mockup/03-cost-centre-report.png)
+
+## Accounting Codes — headings
+
+The Accounting Codes section mirrors the same shell but is driven by the chart of
+accounts. The top level compares the tier-1 headings.
+
+![Accounting Codes — top-level headings](images/reports-mockup/04-accounting-codes-index.png)
+
+## Accounting Codes — drill-down
+
+Clicking a heading drills into its sub-headings (and, one level deeper, its
+leaf codes), keeping a Back trail. The comparison chart and table re-scope to
+the current level.
+
+![Accounting Codes — drill-down into a heading](images/reports-mockup/05-accounting-codes-drilldown.png)
+
+## Accounting-code report (leaf)
+
+A leaf code opens its own report — the same detail layout as a cost centre, but
+broken down by **cost centre** instead of by code, showing which vessels/sites
+drive spend on that line.
+
+![Accounting-code leaf report](images/reports-mockup/06-accounting-code-report.png)
+
+## Interactive version
+
+The screenshots above are static. The fully clickable mockup lives in
+`reports-mockup.html`. Because the Forgejo wiki renders Markdown and sanitises
+embedded HTML/scripts, it will **not** run the mockup inline — open the file
+locally in a browser, or host it somewhere that serves HTML (Forgejo/Codeberg
+Pages, any static host) and link it here.
+
+---
+
+*Mockup screenshots regenerated from `reports-mockup.html`. To refresh them
+after a mockup change, re-run the capture and overwrite the files under
+`images/reports-mockup/`.*

Product/Design-System.md

@@ -70,5 +70,7 @@ shadcn/ui in `App/components/`.
 - English-only for v1; an i18n architecture (react-i18next) was envisioned to be
   wired but not populated.
 
-> A non-functional **Reports** UX mockup also exists in the wiki
+> A non-functional **Reports** UX mockup also exists under
-> (`Reports-Mockup`) — proposed layouts and chart treatments for spend reporting.
+> [Planned Features](Planned/Planned-Features) →
+> [Reports — UX Mockup](Planned/Reports-Mockup) — proposed layouts and chart
+> treatments for spend reporting.

_Sidebar.md

@@ -27,7 +27,10 @@
 - [Notifications](Product/Notifications)
 - [File Storage](Product/File-Storage)
 - [Design System](Product/Design-System)
-- [Reports Mockup](Reports-Mockup)
+
+**Planned/**
+- [Planned Features](Planned/Planned-Features)
+- [Reports Mockup](Planned/Reports-Mockup)
 
 **Quality/**
 - [Testing](Quality/Testing)