diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..84de876 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +# Obsidian editor config — not part of the published wiki +.obsidian/ diff --git a/Home.md b/Home.md index 71d0797..811b7a7 100644 --- a/Home.md +++ b/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) diff --git a/Planned/Planned-Features.md b/Planned/Planned-Features.md new file mode 100644 index 0000000..bc130f3 --- /dev/null +++ b/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).* diff --git a/Planned/Reports-Mockup.md b/Planned/Reports-Mockup.md new file mode 100644 index 0000000..aa1de80 --- /dev/null +++ b/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/`.* diff --git a/Product/Design-System.md b/Product/Design-System.md index e671538..9b4594e 100644 --- a/Product/Design-System.md +++ b/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 -> (`Reports-Mockup`) — proposed layouts and chart treatments for spend reporting. +> A non-functional **Reports** UX mockup also exists under +> [Planned Features](Planned/Planned-Features) → +> [Reports — UX Mockup](Planned/Reports-Mockup) — proposed layouts and chart +> treatments for spend reporting. diff --git a/_Sidebar.md b/_Sidebar.md index d45f491..3a75e23 100644 --- a/_Sidebar.md +++ b/_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) diff --git a/images/reports-mockup/01-cost-centres-monthly.png b/images/reports-mockup/01-cost-centres-monthly.png new file mode 100644 index 0000000..db80f9b Binary files /dev/null and b/images/reports-mockup/01-cost-centres-monthly.png differ diff --git a/images/reports-mockup/02-cost-centres-yearly.png b/images/reports-mockup/02-cost-centres-yearly.png new file mode 100644 index 0000000..741748f Binary files /dev/null and b/images/reports-mockup/02-cost-centres-yearly.png differ diff --git a/images/reports-mockup/03-cost-centre-report.png b/images/reports-mockup/03-cost-centre-report.png new file mode 100644 index 0000000..622d4f7 Binary files /dev/null and b/images/reports-mockup/03-cost-centre-report.png differ diff --git a/images/reports-mockup/04-accounting-codes-index.png b/images/reports-mockup/04-accounting-codes-index.png new file mode 100644 index 0000000..f6fc529 Binary files /dev/null and b/images/reports-mockup/04-accounting-codes-index.png differ diff --git a/images/reports-mockup/05-accounting-codes-drilldown.png b/images/reports-mockup/05-accounting-codes-drilldown.png new file mode 100644 index 0000000..5f82873 Binary files /dev/null and b/images/reports-mockup/05-accounting-codes-drilldown.png differ diff --git a/images/reports-mockup/06-accounting-code-report.png b/images/reports-mockup/06-accounting-code-report.png new file mode 100644 index 0000000..b933838 Binary files /dev/null and b/images/reports-mockup/06-accounting-code-report.png differ