From bcdbe7664be20453ecb7b8c778afcdabe6c0909f Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Mon, 31 Aug 2026 23:06:09 +0200
Subject: [PATCH] feat(dashboard): give stackiq the KPI tiles it never had

Stackiq's dashboard was the one fleet dashboard with no KPI cards at all.
Not a rendering fault: the page was type:"custom" rendering a 675-line
hand-written view whose entire widget list was an info box and two
object-statistics tables. The app's five manifest KPI widgets all sit on
detail pages, never on the dashboard.

The page is now type:"dashboard" with four declarative "stat" widgets --
Organisaties, Modules, Diensten, Contracten -- counted by OpenRegister
through @resolve:voorzieningen_register, the same register/schema pairs
every other page in this manifest already uses.

The non-KPI content is preserved exactly. The info box and both tables
move to src/components/CatalogPanels.vue (template restructured, script
untouched) and mount as the "catalog-panels" widget.

Worth knowing for the next app:

1. A dashboard widget TYPE resolves against the LIBRARY's widget catalog
   (registerDashboardWidget / getWidgetTypeEntry), not the app's registry
   prop and not the page's slots map -- both of those are for page
   components and slot overrides. An unregistered type renders "Widget
   not available" and logs nothing, so it looks exactly like a wiring
   mistake.

2. eslint-suppressions.json is keyed by FILE PATH. Renaming a suppressed
   file orphans its entries, and --prune-suppressions then deletes them,
   so every previously-suppressed error surfaces at once. The entry moved
   to the new path deliberately, minus two suppressions the rename
   genuinely fixed: vue/multi-word-component-names (Dashboard ->
   CatalogPanels) and an unused arg (route -> _route, docblock updated).

Verified in the browser against the published @conduction/nextcloud-vue
(USE_LOCAL_LIB=false): four cards render in the canonical horizontal
white card, zero grey, no "Widget not available", the info box and both
tables still render. The tiles read 0/0/0/0 and that is CORRECT -- the
statistics tables beside them independently report Organization 0,
Service 0, Contract 0 in this environment, so the tiles agree with the
tables rather than reporting a confident zero on a failed fetch.

eslint exits 0, matching the pre-change baseline; webpack compiles.
---
 eslint-suppressions.json                      |  18 +-
 .../CatalogPanels.vue}                        | 297 +++++++-----------
 src/customComponents.js                       |   5 -
 src/main.js                                   |  18 ++
 src/manifest.json                             | 147 ++++++++-
 src/registry.js                               |   6 -
 6 files changed, 285 insertions(+), 206 deletions(-)
 rename src/{views/Dashboard.vue => components/CatalogPanels.vue} (71%)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 855f5d7d..ebf283eb 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -4,6 +4,11 @@
       "count": 2
     }
   },
+  "src/components/CatalogPanels.vue": {
+    "no-console": {
+      "count": 10
+    }
+  },
   "src/components/CollapsibleSection.vue": {
     "vue/slot-name-casing": {
       "count": 1
@@ -431,17 +436,6 @@
       "count": 2
     }
   },
-  "src/views/Dashboard.vue": {
-    "@typescript-eslint/no-unused-vars": {
-      "count": 1
-    },
-    "no-console": {
-      "count": 10
-    },
-    "vue/multi-word-component-names": {
-      "count": 1
-    }
-  },
   "src/views/KwetsbaarhedenView.vue": {
     "@typescript-eslint/no-unused-vars": {
       "count": 1
@@ -542,4 +536,4 @@
       "count": 1
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/Dashboard.vue b/src/components/CatalogPanels.vue
similarity index 71%
rename from src/views/Dashboard.vue
rename to src/components/CatalogPanels.vue
index 92e98de3..3b8c0095 100644
--- a/src/views/Dashboard.vue
+++ b/src/components/CatalogPanels.vue
@@ -1,153 +1,128 @@
 <template>
-	<CnDashboardPage
-		title="Dashboard"
-		description="Overzicht van uw softwarecatalogus en configuraties"
-		:widgets="widgetDefs"
-		:layout="dashboardLayout"
-		:loading="loading">
-		<template #header-actions>
-			<NcButton variant="secondary" @click="refreshAllData">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Refresh v-else :size="20" />
-				</template>
-				Vernieuwen
-			</NcButton>
-		</template>
-
-		<!-- Beheer info box widget -->
-		<template #widget-info-box>
-			<NcNoteCard type="info" class="infoBox">
-				<div class="infoBoxContent">
-					<h3 class="infoBoxTitle">Beheer van Organisaties</h3>
-					<p class="infoBoxText">
-						Organisaties kunnen worden geaccepteerd en beheerd via de
-						organisaties pagina. Het aanmaken en bewerken van gebruikers
-						gaat ook via de organisatie pagina, omdat deze onderdeel zijn
-						van organisaties.
-					</p>
-					<div class="infoBoxActions">
-						<NcButton variant="primary" @click="navigateToOrganizations">
-							<template #icon>
-								<OfficeBuildingOutline :size="16" />
-							</template>
-							Ga naar Organisaties
-						</NcButton>
-					</div>
-				</div>
-			</NcNoteCard>
-		</template>
-
-		<!-- Statistics table 1 widget -->
-		<template #widget-stats-table-1>
-			<div class="statisticsTableContainer">
-				<div class="statisticsTableHeader">
-					<span class="lastUpdated"
-						>Laatst bijgewerkt: {{ formatDate(new Date()) }}</span
-					>
+	<div class="catalogPanels">
+		<NcNoteCard type="info" class="infoBox">
+			<div class="infoBoxContent">
+				<h3 class="infoBoxTitle">Beheer van Organisaties</h3>
+				<p class="infoBoxText">
+					Organisaties kunnen worden geaccepteerd en beheerd via de
+					organisaties pagina. Het aanmaken en bewerken van gebruikers
+					gaat ook via de organisatie pagina, omdat deze onderdeel zijn
+					van organisaties.
+				</p>
+				<div class="infoBoxActions">
+					<NcButton variant="primary" @click="navigateToOrganizations">
+						<template #icon>
+							<OfficeBuildingOutline :size="16" />
+						</template>
+						Ga naar Organisaties
+					</NcButton>
 				</div>
+			</div>
+		</NcNoteCard>
+
+		<div class="statisticsTableContainer">
+			<div class="statisticsTableHeader">
+				<span class="lastUpdated"
+					>Laatst bijgewerkt: {{ formatDate(new Date()) }}</span
+				>
+			</div>
 
-				<table class="objectStatisticsTable">
-					<thead>
-						<tr>
-							<th scope="col">Object Type</th>
-							<th scope="col" class="countHeader">Count</th>
-							<th scope="col" class="manageHeader">Manage</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr
-							v-for="stat in firstTableStats"
-							:key="stat.objectType"
-							style="cursor: pointer"
-							@click="navigateToSchema(stat.slug)">
-							<td>{{ stat.objectType }}</td>
-							<td class="countCell">
-								{{ stat.count.toLocaleString() }}
-							</td>
-							<td class="manageCell">
-								<NcButton
-									v-if="stat.slug === 'organization'"
-									size="small"
-									variant="tertiary"
-									@click.stop="navigateToObjectType(stat.slug)">
-									<template #icon>
-										<component
-											:is="getIconForObjectType(stat.slug)"
-											:size="16" />
-									</template>
-									Manage
-								</NcButton>
-								<span v-else class="disabledManage">
+			<table class="objectStatisticsTable">
+				<thead>
+					<tr>
+						<th scope="col">Object Type</th>
+						<th scope="col" class="countHeader">Count</th>
+						<th scope="col" class="manageHeader">Manage</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr
+						v-for="stat in firstTableStats"
+						:key="stat.objectType"
+						style="cursor: pointer"
+						@click="navigateToSchema(stat.slug)">
+						<td>{{ stat.objectType }}</td>
+						<td class="countCell">
+							{{ stat.count.toLocaleString() }}
+						</td>
+						<td class="manageCell">
+							<NcButton
+								v-if="stat.slug === 'organization'"
+								size="small"
+								variant="tertiary"
+								@click.stop="navigateToObjectType(stat.slug)">
+								<template #icon>
 									<component
 										:is="getIconForObjectType(stat.slug)"
 										:size="16" />
-									<span class="strikethrough">Manage</span>
-								</span>
-							</td>
-						</tr>
-					</tbody>
-				</table>
+								</template>
+								Manage
+							</NcButton>
+							<span v-else class="disabledManage">
+								<component
+									:is="getIconForObjectType(stat.slug)"
+									:size="16" />
+								<span class="strikethrough">Manage</span>
+							</span>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+
+		<div class="statisticsTableContainer">
+			<div class="statisticsTableHeader">
+				<span class="lastUpdated"
+					>Laatst bijgewerkt: {{ formatDate(new Date()) }}</span
+				>
 			</div>
-		</template>
-
-		<!-- Statistics table 2 widget -->
-		<template #widget-stats-table-2>
-			<div class="statisticsTableContainer">
-				<div class="statisticsTableHeader">
-					<span class="lastUpdated"
-						>Laatst bijgewerkt: {{ formatDate(new Date()) }}</span
-					>
-				</div>
 
-				<table class="objectStatisticsTable">
-					<thead>
-						<tr>
-							<th scope="col">Object Type</th>
-							<th scope="col" class="countHeader">Count</th>
-							<th scope="col" class="manageHeader">Manage</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr
-							v-for="stat in secondTableStats"
-							:key="stat.objectType"
-							style="cursor: pointer"
-							@click="navigateToSchema(stat.slug)">
-							<td>{{ stat.objectType }}</td>
-							<td class="countCell">
-								{{ stat.count.toLocaleString() }}
-							</td>
-							<td class="manageCell">
-								<NcButton
-									v-if="stat.slug === 'organization'"
-									size="small"
-									variant="tertiary"
-									@click.stop="navigateToObjectType(stat.slug)">
-									<template #icon>
-										<component
-											:is="getIconForObjectType(stat.slug)"
-											:size="16" />
-									</template>
-									Manage
-								</NcButton>
-								<span v-else class="disabledManage">
+			<table class="objectStatisticsTable">
+				<thead>
+					<tr>
+						<th scope="col">Object Type</th>
+						<th scope="col" class="countHeader">Count</th>
+						<th scope="col" class="manageHeader">Manage</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr
+						v-for="stat in secondTableStats"
+						:key="stat.objectType"
+						style="cursor: pointer"
+						@click="navigateToSchema(stat.slug)">
+						<td>{{ stat.objectType }}</td>
+						<td class="countCell">
+							{{ stat.count.toLocaleString() }}
+						</td>
+						<td class="manageCell">
+							<NcButton
+								v-if="stat.slug === 'organization'"
+								size="small"
+								variant="tertiary"
+								@click.stop="navigateToObjectType(stat.slug)">
+								<template #icon>
 									<component
 										:is="getIconForObjectType(stat.slug)"
 										:size="16" />
-									<span class="strikethrough">Manage</span>
-								</span>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</template>
-	</CnDashboardPage>
+								</template>
+								Manage
+							</NcButton>
+							<span v-else class="disabledManage">
+								<component
+									:is="getIconForObjectType(stat.slug)"
+									:size="16" />
+								<span class="strikethrough">Manage</span>
+							</span>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </template>
 
 <script>
-import { CnDashboardPage } from '@conduction/nextcloud-vue'
 import { NcButton, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import ApplicationCog from 'vue-material-design-icons/ApplicationCog.vue'
@@ -170,12 +145,12 @@ import { navigationStore, objectStore } from '../store/store.js'
  * @see https://github.com/OpenCatalogi/opencatalogi
  *
  * Dashboard view showing overview statistics and configuration status.
- * Uses CnDashboardPage for standard widget-based layout.
+ * Rendered as the `catalog-panels` dashboard widget; the KPI tiles beside it
+ * are declarative `stat` widgets in the manifest.
  */
 export default {
-	name: 'Dashboard',
+	name: 'CatalogPanels',
 	components: {
-		CnDashboardPage,
 		NcButton,
 		NcLoadingIcon,
 		NcNoteCard,
@@ -192,49 +167,10 @@ export default {
 	data() {
 		return {
 			loading: true,
-			dashboardLayout: [
-				{
-					id: 1,
-					widgetId: 'info-box',
-					gridX: 0,
-					gridY: 0,
-					gridWidth: 12,
-					showTitle: false,
-				},
-				{
-					id: 2,
-					widgetId: 'stats-table-1',
-					gridX: 0,
-					gridY: 1,
-					gridWidth: 6,
-					showTitle: false,
-				},
-				{
-					id: 3,
-					widgetId: 'stats-table-2',
-					gridX: 6,
-					gridY: 1,
-					gridWidth: 6,
-					showTitle: false,
-				},
-			],
 		}
 	},
 
 	computed: {
-		/**
-		 * Widget definitions for CnDashboardPage
-		 *
-		 * @return {Array} Widget definition array
-		 * @spec openspec/specs/fe-shell-navigation/spec.md
-		 */
-		widgetDefs() {
-			return [
-				{ id: 'info-box', title: 'Beheer Informatie' },
-				{ id: 'stats-table-1', title: 'Object Statistieken (1)' },
-				{ id: 'stats-table-2', title: 'Object Statistieken (2)' },
-			]
-		},
 
 		/**
 		 * Get object statistics for the table display
@@ -451,11 +387,12 @@ export default {
 		/**
 		 * Navigate to configuration page - opens admin settings in new tab
 		 *
-		 * @param {string} route - Route to navigate to (legacy parameter)
+		 * @param {string} _route - Ignored; the destination is the fixed admin
+		 *   settings URL below. Kept so existing call sites still type-check.
 		 * @return {void}
 		 * @spec openspec/specs/fe-shell-navigation/spec.md
 		 */
-		navigateToConfiguration(route) {
+		navigateToConfiguration(_route) {
 			const settingsUrl = `${window.location.protocol}//${window.location.host}/index.php/settings/admin/stackiq`
 			window.open(settingsUrl, '_blank')
 		},
diff --git a/src/customComponents.js b/src/customComponents.js
index a2538234..dac0c48d 100644
--- a/src/customComponents.js
+++ b/src/customComponents.js
@@ -24,7 +24,6 @@ import ReviewsPanel from './components/reviews/ReviewsPanel.vue'
 import SbomComponentsPanel from './components/sbom/SbomComponentsPanel.vue'
 import VulnerabilityExposurePanel from './components/vulnerabilities/VulnerabilityExposurePanel.vue'
 import ComplianceMatrixView from './views/ComplianceMatrixView.vue'
-import DashboardCustomView from './views/Dashboard.vue'
 import FacetedCatalogIndexView from './views/FacetedCatalogIndexView.vue'
 import KwetsbaarhedenView from './views/KwetsbaarhedenView.vue'
 import LicensePostureView from './views/LicensePostureView.vue'
@@ -48,10 +47,6 @@ export default {
 	StackiqSettingsPage,
 
 	// --- Lib gap: dashboard widget extraction pending. ---
-	// The existing Dashboard.vue (info-box + 2 stats tables) does not yet
-	// fit any built-in widget type. Preserved verbatim until extraction
-	// to a generic schema-stats widget.
-	DashboardCustomView,
 
 	// --- Lib gap: per-organisation lifecycle roadmap. ---
 	// Gebruiken grouped by a DERIVED lifecycle phase (computed from dates, not
diff --git a/src/main.js b/src/main.js
index be3fb3ac..5e8a7f73 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@ import {
 	buildManifest,
 	defaultPageTypes,
 	registerBuiltinDashboardWidgets,
+	registerDashboardWidget,
 	registerIcons,
 	registerTranslations,
 	resolveManifestSentinels,
@@ -28,6 +29,7 @@ import { generateUrl } from '@nextcloud/router'
 import { createApp, h } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import App from './App.vue'
+import CatalogPanels from './components/CatalogPanels.vue'
 import customComponents from './customComponents.js'
 import appIcons from './icons.js'
 import bundledManifest from './manifest.json'
@@ -54,6 +56,22 @@ registerIcons(appIcons)
 // render "Widget not available". This app uses `stat` and `stats-block` widgets
 // in detail-page widget slots, so the explicit call is load-bearing.
 registerBuiltinDashboardWidgets()
+
+// The dashboard's info box + the two object-statistics tables, moved out of the
+// old hand-written Dashboard view so the dashboard could become a declarative
+// `type:"dashboard"` page. The KPI tiles beside it are manifest `stat` widgets.
+//
+// ⚠️ A dashboard widget TYPE resolves against the LIBRARY's widget catalog (this
+// call), not the app's `registry` prop — that one is for page components and
+// slot overrides. An unregistered type renders "Widget not available" and logs
+// nothing at all.
+registerDashboardWidget('catalog-panels', {
+	renderer: CatalogPanels,
+	defaultContent: {},
+	displayName: 'Catalogue panels',
+	icon: 'DatabaseOutline',
+	card: true,
+})
 try {
 	registerTranslations()
 } catch (e) {
diff --git a/src/manifest.json b/src/manifest.json
index b65a5fe4..727c1f12 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -197,10 +197,151 @@
 		{
 			"id": "Dashboard",
 			"route": "/",
-			"type": "custom",
+			"type": "dashboard",
 			"title": "Dashboard",
-			"component": "DashboardCustomView",
-			"_note": "Bespoke landing dashboard: composes CnDashboardPage with hand-authored named widget slots (a management info-box with deep-links and two custom statistics tables that render per-object-type counts with inline navigation). No standard dashboard config expresses these non-KPI slot bodies."
+			"config": {
+				"widgets": [
+					{
+						"id": "kpi-organisations",
+						"type": "stat",
+						"title": "Organisaties",
+						"content": {
+							"label": "Organisaties",
+							"icon": "OfficeBuilding",
+							"route": {
+								"name": "Organisaties"
+							},
+							"format": {
+								"style": "decimal",
+								"decimals": 0
+							},
+							"source": {
+								"register": "@resolve:voorzieningen_register",
+								"schema": "organization",
+								"metric": "count"
+							}
+						}
+					},
+					{
+						"id": "kpi-modules",
+						"type": "stat",
+						"title": "Modules",
+						"content": {
+							"label": "Modules",
+							"icon": "Package",
+							"route": {
+								"name": "Modules"
+							},
+							"format": {
+								"style": "decimal",
+								"decimals": 0
+							},
+							"source": {
+								"register": "@resolve:voorzieningen_register",
+								"schema": "module",
+								"metric": "count"
+							}
+						}
+					},
+					{
+						"id": "kpi-services",
+						"type": "stat",
+						"title": "Diensten",
+						"content": {
+							"label": "Diensten",
+							"icon": "Web",
+							"route": {
+								"name": "Diensten"
+							},
+							"format": {
+								"style": "decimal",
+								"decimals": 0
+							},
+							"source": {
+								"register": "@resolve:voorzieningen_register",
+								"schema": "service",
+								"metric": "count"
+							}
+						}
+					},
+					{
+						"id": "kpi-contracts",
+						"type": "stat",
+						"title": "Contracten",
+						"content": {
+							"label": "Contracten",
+							"icon": "FileDocument",
+							"route": {
+								"name": "Contracten"
+							},
+							"format": {
+								"style": "decimal",
+								"decimals": 0
+							},
+							"source": {
+								"register": "@resolve:voorzieningen_register",
+								"schema": "contract",
+								"metric": "count"
+							}
+						}
+					},
+					{
+						"id": "catalog-panels",
+						"type": "catalog-panels",
+						"title": "Object statistieken",
+						"_note": "The management info-box and the two per-object-type statistics tables, moved out of the former hand-written Dashboard view into src/components/CatalogPanels.vue. Registered as a widget TYPE via registerDashboardWidget() in main.js: CnDashboardPage resolves a widget's type against the LIBRARY catalog, not the app registry, and an unregistered type renders 'Widget not available' silently."
+					}
+				],
+				"layout": [
+					{
+						"id": "1",
+						"widgetId": "kpi-organisations",
+						"gridX": 0,
+						"gridY": 0,
+						"gridWidth": 3,
+						"gridHeight": 2,
+						"showTitle": false
+					},
+					{
+						"id": "2",
+						"widgetId": "kpi-modules",
+						"gridX": 3,
+						"gridY": 0,
+						"gridWidth": 3,
+						"gridHeight": 2,
+						"showTitle": false
+					},
+					{
+						"id": "3",
+						"widgetId": "kpi-services",
+						"gridX": 6,
+						"gridY": 0,
+						"gridWidth": 3,
+						"gridHeight": 2,
+						"showTitle": false
+					},
+					{
+						"id": "4",
+						"widgetId": "kpi-contracts",
+						"gridX": 9,
+						"gridY": 0,
+						"gridWidth": 3,
+						"gridHeight": 2,
+						"showTitle": false
+					},
+					{
+						"id": "5",
+						"widgetId": "catalog-panels",
+						"gridX": 0,
+						"gridY": 2,
+						"gridWidth": 12,
+						"gridHeight": 8,
+						"showTitle": false,
+						"borderless": true
+					}
+				]
+			},
+			"_note": "Was type:'custom' rendering a bespoke view. The four KPI tiles are declarative `stat` widgets counted by OpenRegister; the non-KPI slot bodies live on as the `catalog-panels` widget."
 		},
 		{
 			"id": "Organisaties",
diff --git a/src/registry.js b/src/registry.js
index 790d1f5a..fd8d4a61 100644
--- a/src/registry.js
+++ b/src/registry.js
@@ -20,7 +20,6 @@
 import ContractApprovalPanel from './components/contracts/ContractApprovalPanel.vue'
 import OrganisationMergePanel from './components/organisations/OrganisationMergePanel.vue'
 import ComplianceMatrixView from './views/ComplianceMatrixView.vue'
-import DashboardCustomView from './views/Dashboard.vue'
 import FlowDetailSidebar from './views/flows/FlowDetailSidebar.vue'
 import LifecycleRoadmapView from './views/LifecycleRoadmapView.vue'
 import SoftwareCatalogSettingsPage from './views/settings/StackiqSettings.vue'
@@ -41,11 +40,6 @@ export default {
 	},
 
 	// --- Lib gap: dashboard widget extraction pending. ---
-	// Preserved verbatim until extraction to a generic schema-stats widget.
-	DashboardCustomView: {
-		kind: 'page',
-		component: DashboardCustomView,
-	},
 
 	// --- Lib gap: per-organisation lifecycle roadmap. ---
 	LifecycleRoadmapView: {