From d889210b79af34acde598dd023a6de5e036bc25c Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 9 Jul 2026 12:56:57 +0800
Subject: [PATCH 01/30] introduce `Licensed Endpoints` tab and migrate controls
 from internal tooling

---
 src/Frontend/src/components/DataView.vue      |   2 +-
 .../resources/EndpointThroughputSummary.ts    |  15 ---
 .../src/resources/QueueThroughputSummary.ts   |  19 +++
 src/Frontend/src/router/config.ts             |  29 +++--
 src/Frontend/src/router/routeLinks.ts         |  14 ++-
 .../src/views/ThroughputReportView.spec.ts    |   4 +-
 .../src/views/ThroughputReportView.vue        |   2 +-
 .../views/throughputreport/EndpointsView.vue  |  17 +--
 .../endpoints/CollapsedEndpoint.vue           |  88 ++++++++++++++
 .../endpoints/EndpointData.vue                |  78 +++++++++++++
 .../endpoints/EndpointDetails.vue             |  86 ++++++++++++++
 .../endpoints/EndpointHeader.vue              | 109 ++++++++++++++++++
 .../endpoints/LicensedEndpointsView.vue       |  89 ++++++++++++++
 .../throughputreport/endpoints/QueueData.vue  |  71 ++++++++++++
 .../throughputreport/endpoints/QueueName.vue  |  39 +++++++
 .../views/throughputreport/endpoints/types.ts |  20 ++++
 .../DetectedBrokerQueuesView.vue              |   6 +-
 .../DetectedEndpointsView.vue                 |   6 +-
 .../DetectedListView.spec.ts                  |  48 ++++----
 .../DetectedListView.vue                      |  31 ++---
 .../InlineThroughputGraph.vue                 |   7 +-
 .../{endpoints => queues}/ThroughputGraph.vue |   2 +-
 .../{endpoints => queues}/dataSource.ts       |   0
 .../{endpoints => queues}/useHiddenFeature.ts |   0
 .../{endpoints => queues}/userIndicator.ts    |   0
 .../userIndicatorMapper.ts                    |   2 +-
 .../throughputreport/throughputClient.ts      |   6 +-
 .../preconditions/hasLicensingEndpoints.ts    |   6 +-
 28 files changed, 708 insertions(+), 88 deletions(-)
 delete mode 100644 src/Frontend/src/resources/EndpointThroughputSummary.ts
 create mode 100644 src/Frontend/src/resources/QueueThroughputSummary.ts
 create mode 100644 src/Frontend/src/views/throughputreport/endpoints/CollapsedEndpoint.vue
 create mode 100644 src/Frontend/src/views/throughputreport/endpoints/EndpointData.vue
 create mode 100644 src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
 create mode 100644 src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue
 create mode 100644 src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue
 create mode 100644 src/Frontend/src/views/throughputreport/endpoints/QueueData.vue
 create mode 100644 src/Frontend/src/views/throughputreport/endpoints/QueueName.vue
 create mode 100644 src/Frontend/src/views/throughputreport/endpoints/types.ts
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/DetectedBrokerQueuesView.vue (88%)
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/DetectedEndpointsView.vue (88%)
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/DetectedListView.spec.ts (81%)
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/DetectedListView.vue (86%)
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/InlineThroughputGraph.vue (88%)
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/ThroughputGraph.vue (97%)
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/dataSource.ts (100%)
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/useHiddenFeature.ts (100%)
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/userIndicator.ts (100%)
 rename src/Frontend/src/views/throughputreport/{endpoints => queues}/userIndicatorMapper.ts (89%)

diff --git a/src/Frontend/src/components/DataView.vue b/src/Frontend/src/components/DataView.vue
index 6bc625c5d5..ce3ff9a77b 100644
--- a/src/Frontend/src/components/DataView.vue
+++ b/src/Frontend/src/components/DataView.vue
@@ -24,7 +24,7 @@ watch(itemsPerPage, () => emit("itemsPerPageChanged", itemsPerPage.value));
 </script>
 
 <template>
-  <slot name="data" :pageData="pageData" />
+  <slot name="data" :pageData="pageData" :pageNumber="pageNumber" />
   <div class="row">
     <ItemsPerPage v-if="showItemsPerPage" v-model="itemsPerPage" :options="itemsPerPageOptions" />
     <PaginationStrip v-if="showPagination" v-model="pageNumber" :totalCount="data.length" :itemsPerPage="itemsPerPage" />
diff --git a/src/Frontend/src/resources/EndpointThroughputSummary.ts b/src/Frontend/src/resources/EndpointThroughputSummary.ts
deleted file mode 100644
index 764e6455cf..0000000000
--- a/src/Frontend/src/resources/EndpointThroughputSummary.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-interface EndpointThroughputSummary {
-  name: string;
-  is_known_endpoint: boolean;
-  user_indicator: string;
-  max_daily_throughput: number;
-  monthly_throughput?: MonthlyThroughput[];
-  max_monthly_throughput?: number;
-}
-
-export interface MonthlyThroughput {
-  month: string;
-  throughput: number;
-}
-
-export type { EndpointThroughputSummary as default };
diff --git a/src/Frontend/src/resources/QueueThroughputSummary.ts b/src/Frontend/src/resources/QueueThroughputSummary.ts
new file mode 100644
index 0000000000..c6000d9f53
--- /dev/null
+++ b/src/Frontend/src/resources/QueueThroughputSummary.ts
@@ -0,0 +1,19 @@
+//Note that this is called EndpointThroughputSummary in ServiceControl, but
+// due to endpoints being used on LicensedEndpointView, it makes the data clearer
+// to name it QueueThroughputSummary (which is what it actually is)
+interface QueueThroughputSummary {
+  name: string;
+  name_hash: string;
+  is_known_endpoint: boolean;
+  user_indicator: string;
+  max_daily_throughput: number;
+  monthly_throughput?: MonthlyThroughput[];
+  max_monthly_throughput?: number;
+}
+
+export interface MonthlyThroughput {
+  month: string;
+  throughput: number;
+}
+
+export type { QueueThroughputSummary as default };
diff --git a/src/Frontend/src/router/config.ts b/src/Frontend/src/router/config.ts
index 9e4f579db0..5fbf5633fe 100644
--- a/src/Frontend/src/router/config.ts
+++ b/src/Frontend/src/router/config.ts
@@ -148,23 +148,36 @@ const config: RouteItem[] = [
     path: routeLinks.throughput.root,
     component: ThroughputReportView,
     title: "Usage",
-    redirect: routeLinks.throughput.endpoints.root,
+    redirect: routeLinks.throughput.queues.root,
     children: [
       {
         title: "Endpoints",
-        path: routeLinks.throughput.endpoints.root,
-        redirect: routeLinks.throughput.endpoints.detectedEndpoints.link,
+        path: routeLinks.throughput.queues.root,
+        redirect: routeLinks.throughput.queues.detectedEndpoints.link,
         component: () => import("@/views/throughputreport/EndpointsView.vue"),
         children: [
           {
-            title: "Detected Endpoints",
-            path: routeLinks.throughput.endpoints.detectedEndpoints.template,
-            component: () => import("@/views/throughputreport/endpoints/DetectedEndpointsView.vue"),
+            title: "Detected Endpoint Queues",
+            path: routeLinks.throughput.queues.detectedEndpoints.template,
+            component: () => import("@/views/throughputreport/queues/DetectedEndpointsView.vue"),
           },
           {
             title: "Detected Broker Queues",
-            path: routeLinks.throughput.endpoints.detectedBrokerQueues.template,
-            component: () => import("@/views/throughputreport/endpoints/DetectedBrokerQueuesView.vue"),
+            path: routeLinks.throughput.queues.detectedBrokerQueues.template,
+            component: () => import("@/views/throughputreport/queues/DetectedBrokerQueuesView.vue"),
+          },
+        ],
+      },
+      {
+        title: "Endpoints",
+        path: routeLinks.throughput.endpoints.root,
+        redirect: routeLinks.throughput.endpoints.licensedEndpoints.link,
+        component: () => import("@/views/throughputreport/EndpointsView.vue"),
+        children: [
+          {
+            title: "Licensed Endpoints",
+            path: routeLinks.throughput.endpoints.licensedEndpoints.template,
+            component: () => import("@/views/throughputreport/endpoints/LicensedEndpointsView.vue"),
           },
         ],
       },
diff --git a/src/Frontend/src/router/routeLinks.ts b/src/Frontend/src/router/routeLinks.ts
index 8707d832b3..430fa782e1 100644
--- a/src/Frontend/src/router/routeLinks.ts
+++ b/src/Frontend/src/router/routeLinks.ts
@@ -58,6 +58,7 @@ const configurationLinks = (root: string) => {
 const throughputLinks = (root: string) => {
   return {
     root: root,
+    queues: throughputQueuesLinks(`${root}/queues`),
     endpoints: throughputEndpointLinks(`${root}/endpoints`),
     setup: throughputSetupLinks(`${root}/setup`),
   };
@@ -76,7 +77,7 @@ const throughputSetupLinks = (root: string) => {
   };
 };
 
-const throughputEndpointLinks = (root: string) => {
+const throughputQueuesLinks = (root: string) => {
   function createLink(template: string) {
     return { link: `${root}/${template}`, template: template };
   }
@@ -88,6 +89,17 @@ const throughputEndpointLinks = (root: string) => {
   };
 };
 
+const throughputEndpointLinks = (root: string) => {
+  function createLink(template: string) {
+    return { link: `${root}/${template}`, template: template };
+  }
+
+  return {
+    root,
+    licensedEndpoints: createLink("licensed"),
+  };
+};
+
 const monitoringLinks = (root: string) => {
   return {
     root,
diff --git a/src/Frontend/src/views/ThroughputReportView.spec.ts b/src/Frontend/src/views/ThroughputReportView.spec.ts
index d6664704b8..773ec18095 100644
--- a/src/Frontend/src/views/ThroughputReportView.spec.ts
+++ b/src/Frontend/src/views/ThroughputReportView.spec.ts
@@ -96,7 +96,7 @@ describe("EndpointsView tests", () => {
 
       await renderComponent(Transport.AmazonSQS, async (driver) => {
         await driver.setUp(precondition.hasLicensingReportAvailable());
-        await driver.setUp(precondition.hasLicensingEndpoints([{ name: "foo", is_known_endpoint: false, user_indicator: "something", max_daily_throughput: 0 }]));
+        await driver.setUp(precondition.hasLicensingEndpoints([{ name: "foo", name_hash: "", is_known_endpoint: false, user_indicator: "something", max_daily_throughput: 0 }]));
         driver.mockEndpoint(`${window.defaultConfig.service_control_url}licensing/report/file`, {
           body: {},
           headers: {
@@ -114,7 +114,7 @@ describe("EndpointsView tests", () => {
     test("and there are warnings, dialog is displayed", async () => {
       await renderComponent(Transport.AmazonSQS, async (driver) => {
         await driver.setUp(precondition.hasLicensingReportAvailable());
-        await driver.setUp(precondition.hasLicensingEndpoints([{ name: "foo", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 0 }]));
+        await driver.setUp(precondition.hasLicensingEndpoints([{ name: "foo", name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 0 }]));
       });
 
       const use = userEvent.setup();
diff --git a/src/Frontend/src/views/ThroughputReportView.vue b/src/Frontend/src/views/ThroughputReportView.vue
index 62561c15c1..da157a91d9 100644
--- a/src/Frontend/src/views/ThroughputReportView.vue
+++ b/src/Frontend/src/views/ThroughputReportView.vue
@@ -19,7 +19,7 @@ const throughputClient = createThroughputClient();
 const reportState = computedAsync(async () => (isThroughputSupported.value ? await throughputClient.reportAvailable() : null), null);
 
 async function generateReport() {
-  const results = await throughputClient.endpoints();
+  const results = await throughputClient.queues();
   const hasNonUserIndicatorEndpoint = results.find((value) => !value.user_indicator);
 
   if (hasNonUserIndicatorEndpoint) {
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index 8bb1f99f8d..2b56e7c3ba 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import routeLinks from "@/router/routeLinks";
 import isRouteSelected from "@/composables/isRouteSelected";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
-import { userIndicatorMapper } from "@/views/throughputreport/endpoints/userIndicatorMapper";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator.ts";
+import { userIndicatorMapper } from "@/views/throughputreport/queues/userIndicatorMapper.ts";
 import { ref, type Component } from "vue";
 import { storeToRefs } from "pinia";
 import LegendNServiceBusEndpoint from "./LegendNServiceBusEndpoint.vue";
@@ -39,7 +39,7 @@ function toggleOptionsLegendVisible() {
   <div class="box">
     <div class="row">
       <p>
-        Set an Endpoint Type for all detected endpoints and broker queues with the most appropriate option.<br />
+        Set an Endpoint Type for all detected endpoint and broker queues with the most appropriate option.<br />
         Use the filters to bulk set the Endpoint Types on similar named endpoints/queues.<br />
         If the names of the endpoints/queues contain confidential or proprietary information, make sure you set up <RouterLink :to="routeLinks.throughput.setup.mask.link">masking in Configuration</RouterLink>.<br />
         <a href="#" :aria-label="`${showLegend ? 'Hide' : 'Show'} Endpoint Types meaning`" @click.prevent="toggleOptionsLegendVisible()">{{ showLegend ? "Hide" : "Show" }} Endpoint Types meaning.</a>
@@ -56,11 +56,14 @@ function toggleOptionsLegendVisible() {
     <div class="row">
       <div class="col-sm-12">
         <div class="nav tabs">
-          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.endpoints.detectedEndpoints.link) }">
-            <RouterLink :to="routeLinks.throughput.endpoints.detectedEndpoints.link">Detected Endpoints</RouterLink>
+          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedEndpoints.link) }">
+            <RouterLink :to="routeLinks.throughput.queues.detectedEndpoints.link">Detected Endpoint Queues</RouterLink>
           </h5>
-          <h5 v-if="isBrokerTransport" class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.endpoints.detectedBrokerQueues.link) }">
-            <RouterLink :to="routeLinks.throughput.endpoints.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
+          <h5 v-if="isBrokerTransport" class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedBrokerQueues.link) }">
+            <RouterLink :to="routeLinks.throughput.queues.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
+          </h5>
+          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.endpoints.licensedEndpoints.link) }">
+            <RouterLink :to="routeLinks.throughput.endpoints.licensedEndpoints.link">Licensed Endpoints</RouterLink>
           </h5>
         </div>
       </div>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/CollapsedEndpoint.vue b/src/Frontend/src/views/throughputreport/endpoints/CollapsedEndpoint.vue
new file mode 100644
index 0000000000..ddddcb0f90
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/endpoints/CollapsedEndpoint.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { EndpointClassification, type Endpoint } from "./types";
+import FAIcon from "@/components/FAIcon.vue";
+import { faCircleChevronDown } from "@fortawesome/free-solid-svg-icons";
+
+const props = defineProps<{ endpoint: Endpoint }>();
+const emit = defineEmits(["expand"]);
+
+const endpointClassificationStyle = computed(() => {
+  switch (props.endpoint.classification) {
+    case EndpointClassification.Full:
+      return "--full";
+    case EndpointClassification.SendOnly:
+      return "--send-only";
+  }
+});
+</script>
+
+<template>
+  <div class="endpoint-header" :style="{ '--endpoint-header-bg': `var(${endpointClassificationStyle})` }">
+    <div class="endpoint-name">
+      <FAIcon :icon="faCircleChevronDown" class="expand-button" size="lg" tabindex="0" title="expand" @click="emit('expand')" />
+      <strong :title="endpoint.name">{{ endpoint.name }}</strong>
+    </div>
+    <div class="details">
+      <span>Queues: {{ endpoint.queues.length }}</span>
+      <span> Size: {{ endpoint.endpointSize }} </span>
+      <span>
+        Throughput:
+        <!-- {{ `${NumberFormat.format(displayEndpointSizeModel ? endpoint.averageMonthlyThroughput : endpoint.estimatedDailyThroughput)}/${displayEndpointSizeModel ? "month" : "day"}` }} -->
+      </span>
+    </div>
+    <!-- <div>
+      <RemoveEndpoint :endpoint="endpoint" />
+    </div> -->
+  </div>
+</template>
+
+<style scoped>
+.endpoint-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: hsl(from var(--endpoint-header-bg) h s 90%);
+  border-radius: 5px;
+}
+
+.dark-mode .endpoint-header {
+  background-color: var(--endpoint-header-bg);
+}
+
+.endpoint-header div {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.endpoint-header div.header-buttons {
+  gap: 0.25rem;
+}
+
+.expand-button {
+  cursor: pointer;
+  color: hsl(from var(--bs-body-color) h s l / 50%);
+}
+
+.expand-button:hover {
+  color: inherit;
+}
+
+.endpoint-header .details {
+  font-size: 0.9em;
+  gap: 2em;
+  flex-basis: 35em;
+}
+
+.endpoint-header .endpoint-name {
+  flex-basis: calc(min(40em, 35vw));
+  overflow: hidden;
+}
+
+.endpoint-header .endpoint-name strong {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/EndpointData.vue b/src/Frontend/src/views/throughputreport/endpoints/EndpointData.vue
new file mode 100644
index 0000000000..636ae772d3
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/endpoints/EndpointData.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { ref } from 'vue';
+import EndpointDetails from './EndpointDetails.vue';
+import EndpointHeader from './EndpointHeader.vue';
+import CollapsedEndpoint from './CollapsedEndpoint.vue';
+import PageControl from './components/PageControl.vue';
+import { setEndpointElementReference } from './model/tabModel';
+import useEndpointListModel from './model/endpointListModel';
+
+const collapsedEndpoints = ref(new Map());
+const endpointPageModel = useEndpointListModel();
+const { pageItems } = endpointPageModel;
+</script>
+
+<template>
+  <div class="actions mb-2">
+    <div class="backdrop"></div>
+    <PageControl
+      v-model="endpointPageModel"
+      @page-changed="collapsedEndpoints.clear()"
+      :item-desc="(endpoint) => endpoint.name"
+      class="pages"
+    />
+    <button type="button" class="btn btn-primary" @click="pageItems.forEach((endpoint) => collapsedEndpoints.set(endpoint, true))">
+      Collapse All
+    </button>
+  </div>
+  <div class="card mb-3" v-for="endpoint in pageItems" :ref="(el) => setEndpointElementReference(endpoint, el)">
+    <CollapsedEndpoint
+      class="card-header"
+      v-if="collapsedEndpoints.get(endpoint)"
+      :endpoint="endpoint"
+      @expand="collapsedEndpoints.set(endpoint, false)"
+    />
+    <template v-else>
+      <EndpointHeader :endpoint="endpoint" class="card-header" @collapse="collapsedEndpoints.set(endpoint, true)" />
+      <EndpointDetails :endpoint="endpoint" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  margin-left: 0.5em;
+  box-shadow:
+    0px 0.1px 0.4px hsl(var(--shadow-color) / 0.34),
+    0px 0.1px 0.4px 0.7px hsl(var(--shadow-color) / 0.3),
+    0px 0.4px 1.2px 1.4px hsl(var(--shadow-color) / 0.25),
+    0px 1px 3px 2.1px hsl(var(--shadow-color) / 0.21),
+    0px 2.3px 7px 2.9px hsl(var(--shadow-color) / 0.17),
+    0px 4.3px 13.2px 3.6px hsl(var(--shadow-color) / 0.13),
+    0px 7.3px 22.4px 4.3px hsl(var(--shadow-color) / 0.09),
+    0px 11.6px 35.6px 5px hsl(var(--shadow-color) / 0.04);
+}
+
+.actions {
+  display: flex;
+  gap: 0.25rem;
+  justify-content: space-between;
+  align-items: end;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.actions .backdrop {
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(16px);
+  z-index: -1;
+}
+
+.pages {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
new file mode 100644
index 0000000000..1867cbb91b
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { Endpoint } from "./types";
+import QueueData from "./QueueData.vue";
+
+// import { computed } from "vue";
+// import { compare } from "./utilities";
+
+const props = defineProps<{ endpoint: Endpoint }>();
+
+// const throughput = computed(() =>
+//   props.endpoint.queues.every((queue) => queue.throughputByMonth.length || queue.throughput === 0)
+//     ? [
+//         ...props.endpoint.queues
+//           .flatMap((queue) => queue.throughputByMonth)
+//           .reduce((result, [month, value]) => {
+//             const existing = result.getOrInsert(month, 0);
+//             result.set(month, existing + value);
+//             return result;
+//           }, new Map()),
+//       ].sort(([x1], [x2]) => compare(x1, x2))
+//     : [],
+// );
+// const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => compare(q1.simplifiedName.toLowerCase(), q2.simplifiedName.toLowerCase())));
+</script>
+
+<template>
+  <div class="card-body" :key="endpoint.clientId">
+    <div class="details">
+      <div class="details-item">
+        <label>Licensed Size</label><span>{{ endpoint.endpointSize }}</span>
+      </div>
+      <div class="details-item">
+        <label>Current Size</label><span>{{ endpoint.endpointSize }}</span>
+      </div>
+    </div>
+    <!-- <ThroughputGraph :data="throughput" class="graph" v-if="throughput.length" /> -->
+    <div class="queue-data">
+      <QueueData :queues="endpoint.queues" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card-body {
+  display: grid;
+  gap: 2px;
+  grid-template-areas:
+    "details graph"
+    "queue-data queue-data";
+}
+
+.details {
+  grid-area: details;
+  display: flex;
+}
+
+.graph {
+  grid-area: graph;
+  margin-bottom: 1rem;
+  justify-self: flex-end;
+}
+
+.queue-data {
+  grid-area: queue-data;
+}
+
+.details-item {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 0.75fr;
+  align-items: center;
+}
+
+.details-item label {
+  font-weight: bold;
+  margin: 0;
+}
+
+.details-item label::after {
+  content: ":";
+}
+
+.details-item span {
+  padding: 0.375rem 0;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue b/src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue
new file mode 100644
index 0000000000..d4d0aaabdc
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch } from "vue";
+import { EndpointClassification, type Endpoint } from "./types";
+import FAIcon from "@/components/FAIcon.vue";
+import { faCircleChevronUp } from "@fortawesome/free-solid-svg-icons";
+
+const props = defineProps<{ endpoint: Endpoint }>();
+const emit = defineEmits(["collapse"]);
+
+const endpointClassificationStyle = computed(() => {
+  switch (props.endpoint.classification) {
+    case EndpointClassification.Full:
+      return "--full";
+    case EndpointClassification.SendOnly:
+      return "--send-only";
+  }
+});
+
+const endpointName = ref(props.endpoint.name);
+const isValid = computed(() => endpointName.value?.length > 0 && endpointName.value?.length <= 80);
+const saveButton = useTemplateRef("save");
+const nameEdit = useTemplateRef("nameEdit");
+
+function saveName() {
+  if (isValid.value) props.endpoint.name = endpointName.value;
+}
+
+watch(
+  () => props.endpoint.name,
+  (newValue) => (endpointName.value = newValue)
+);
+</script>
+
+<template>
+  <div class="endpoint-header" :key="endpoint.clientId" :style="{ '--endpoint-header-bg': `var(${endpointClassificationStyle})` }">
+    <div class="endpoint-name">
+      <FAIcon :icon="faCircleChevronUp" class="collapse-button" size="lg" tabindex="0" title="collapse" @click="emit('collapse')" />
+      <strong :title="endpoint.name">{{ endpoint.name }}</strong>
+    </div>
+    <div>
+      <label>Classification:</label>
+      <select v-model="endpoint.classification" class="form-select">
+        <option v-for="[name, classification] in Object.entries(EndpointClassification).filter(([, classification]) => !isNaN(Number(classification)))" :value="classification">{{ name }}</option>
+      </select>
+    </div>
+    <div class="header-buttons d-print-none">
+      <!-- <ModalButton
+        class="btn btn-secondary"
+        :id="`editEndpointName${endpoint.clientId}`"
+        modal-title="Edit Endpoint Name"
+        @[`hidden.bs.modal`]="endpointName = endpoint.name"
+        @[`shown.bs.modal`]="nameEdit.focus()"
+      >
+        Edit Name
+        <template #modalBody>
+          <TextEdit ref="nameEdit" :maxlength="80" v-model="endpointName" @accept="saveButton.click()" />
+        </template>
+        <template #modalFooter>
+          <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button ref="save" class="btn btn-primary" data-bs-dismiss="modal" @click="saveName" :disabled="!isValid">Save</button>
+        </template>
+      </ModalButton>
+      <RemoveEndpoint :endpoint="endpoint" /> -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.endpoint-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: hsl(from var(--endpoint-header-bg) h s 90%);
+}
+
+.dark-mode .endpoint-header {
+  background-color: var(--endpoint-header-bg);
+}
+
+.endpoint-header div {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.endpoint-header div.header-buttons {
+  gap: 0.25rem;
+}
+
+.collapse-button {
+  cursor: pointer;
+  color: hsl(from var(--bs-body-color) h s l / 50%);
+}
+
+.collapse-button:hover {
+  color: inherit;
+}
+
+.endpoint-header .endpoint-name {
+  flex-basis: calc(min(40em, 35vw));
+  overflow: hidden;
+}
+
+.endpoint-header .endpoint-name strong {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue
new file mode 100644
index 0000000000..9abebae84c
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import DataView from "@/components/DataView.vue";
+import { onMounted, ref } from "vue";
+import CollapsedEndpoint from "./CollapsedEndpoint.vue";
+import type { Endpoint, Queue } from "./types.ts";
+import EndpointHeader from "./EndpointHeader.vue";
+import EndpointDetails from "./EndpointDetails.vue";
+import createThroughputClient from "@/views/throughputreport/throughputClient";
+
+const endpoints = ref<Endpoint[]>([]);
+const collapsedEndpoints = ref(new Map());
+
+onMounted(async () => {
+  const sample: any = await import("./sample.json");
+  const throughputClient = createThroughputClient();
+  const scQueues = await throughputClient.queues();
+
+  endpoints.value = sample.endpoints.map(
+    (metaEp: any) =>
+      ({
+        clientId: crypto.randomUUID(),
+        name: metaEp.name,
+        classification: metaEp.classification,
+        endpointSize: metaEp.endpointSize,
+        queues: metaEp.queues.map(
+          (metaQ: any) =>
+            ({
+              nameHash: metaQ.nameHash,
+              scope: metaQ.scope,
+              details: scQueues.find((scQ) => scQ.name_hash === metaQ.nameHash),
+            }) as Queue
+        ),
+      }) as Endpoint
+  );
+});
+</script>
+
+<template>
+  <div class="mt-2">
+    <DataView :data="endpoints" :items-per-page="5">
+      <template #data="{ pageData, pageNumber }">
+        <!--parent div with key ensures that any state for the details below is reset on page change-->
+        <div :key="pageNumber">
+          <div class="card mb-3" v-for="endpoint in pageData">
+            <CollapsedEndpoint class="card-header" v-if="collapsedEndpoints.get(endpoint)" :endpoint="endpoint" @expand="collapsedEndpoints.set(endpoint, false)" />
+            <template v-else>
+              <EndpointHeader :endpoint="endpoint" class="card-header" @collapse="collapsedEndpoints.set(endpoint, true)" />
+              <EndpointDetails :endpoint="endpoint" />
+            </template>
+          </div>
+        </div>
+      </template>
+    </DataView>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  --full: hsl(196deg 100% 31%);
+  --send-only: hsl(159deg 100% 31%);
+  --shadow-color: 215deg 50% 30%;
+  box-shadow:
+    0px 0.1px 0.4px hsl(var(--shadow-color) / 0.34),
+    0px 0.1px 0.4px 0.7px hsl(var(--shadow-color) / 0.3),
+    0px 0.4px 1.2px 1.4px hsl(var(--shadow-color) / 0.25),
+    0px 1px 3px 2.1px hsl(var(--shadow-color) / 0.21),
+    0px 2.3px 7px 2.9px hsl(var(--shadow-color) / 0.17),
+    0px 4.3px 13.2px 3.6px hsl(var(--shadow-color) / 0.13),
+    0px 7.3px 22.4px 4.3px hsl(var(--shadow-color) / 0.09),
+    0px 11.6px 35.6px 5px hsl(var(--shadow-color) / 0.04);
+}
+
+.actions {
+  display: flex;
+  gap: 0.25rem;
+  justify-content: space-between;
+  align-items: end;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.actions .backdrop {
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(16px);
+  z-index: -1;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/QueueData.vue b/src/Frontend/src/views/throughputreport/endpoints/QueueData.vue
new file mode 100644
index 0000000000..2e23671072
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/endpoints/QueueData.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import DataView from "@/components/DataView.vue";
+import InlineThroughputGraph from "../queues/InlineThroughputGraph.vue";
+import QueueName from "./QueueName.vue";
+import type { Queue } from "./types.ts";
+
+const props = defineProps<{
+  queues: Queue[];
+  actionsComponent?: Object;
+  additionalData?: Object;
+}>();
+</script>
+
+<template>
+  <DataView v-if="queues" :data="queues" :items-per-page="4">
+    <template #data="{ pageData }">
+      <table class="table">
+        <thead>
+          <tr>
+            <th class="queue-name">Queue Name</th>
+            <th class="text-end">Throughput</th>
+            <th v-if="actionsComponent"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="queue in pageData" :key="`${queue.nameHash}`">
+            <td class="queue-name">
+              <QueueName :queue="queue" />
+            </td>
+            <td class="text-end">
+              <div class="throughput">
+                <InlineThroughputGraph class="position-right" v-if="queue.details?.monthly_throughput?.length" :data="queue.details.monthly_throughput" />
+                <!-- {{ NumberFormat.format(queue.averageMonthlyThroughput) }} -->
+                {{ queue.details?.max_monthly_throughput }}
+              </div>
+            </td>
+            <td v-if="actionsComponent">
+              <component :is="actionsComponent" :queue="queue" :additional-data="additionalData" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+  </DataView>
+</template>
+
+<style scoped>
+.table {
+  width: 100%;
+}
+
+td:not(.queue-name),
+th:not(.queue-name) {
+  width: 0;
+}
+
+td {
+  padding-top: 0.1rem;
+  padding-bottom: 0.1rem;
+}
+
+td.queue-name {
+  display: flex;
+  gap: 3px;
+}
+
+.throughput {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/QueueName.vue b/src/Frontend/src/views/throughputreport/endpoints/QueueName.vue
new file mode 100644
index 0000000000..0318789125
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/endpoints/QueueName.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Queue } from "./types";
+
+defineProps<{ queue: Queue }>();
+</script>
+
+<template>
+  <div class="queue-name">
+    <span>
+      <span class="scope" v-if="queue.scope != null">{{ queue.scope }}</span>
+      <span class="name">{{ queue.details?.name ?? queue.nameHash }}</span>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.queue-name {
+  display: flex;
+  flex-direction: column;
+  font-family:
+    Consolas,
+    Lucida Console,
+    monospace;
+}
+
+.scope {
+  border: solid 1px #666;
+  border-radius: 4px;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  padding: 2px;
+  margin-right: 4px;
+  white-space: nowrap;
+}
+
+.name {
+  overflow-wrap: anywhere;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/types.ts b/src/Frontend/src/views/throughputreport/endpoints/types.ts
new file mode 100644
index 0000000000..caef2472b3
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/endpoints/types.ts
@@ -0,0 +1,20 @@
+import type QueueThroughputSummary from "@/resources/QueueThroughputSummary";
+
+export enum EndpointClassification {
+  Full = 0,
+  SendOnly = 1,
+}
+
+export interface Queue {
+  nameHash: string;
+  scope: string;
+  details: QueueThroughputSummary;
+}
+
+export interface Endpoint {
+  clientId: string;
+  name: string;
+  queues: Queue[];
+  classification: EndpointClassification;
+  endpointSize: string;
+}
diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedBrokerQueuesView.vue b/src/Frontend/src/views/throughputreport/queues/DetectedBrokerQueuesView.vue
similarity index 88%
rename from src/Frontend/src/views/throughputreport/endpoints/DetectedBrokerQueuesView.vue
rename to src/Frontend/src/views/throughputreport/queues/DetectedBrokerQueuesView.vue
index 26c1fb4efe..56914f305b 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/DetectedBrokerQueuesView.vue
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedBrokerQueuesView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import DetectedListView from "@/views/throughputreport/endpoints/DetectedListView.vue";
-import { DataSource } from "@/views/throughputreport/endpoints/dataSource";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import DetectedListView from "@/views/throughputreport/queues/DetectedListView.vue";
+import { DataSource } from "@/views/throughputreport/queues/dataSource";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator";
 import routeLinks from "@/router/routeLinks";
 import { storeToRefs } from "pinia";
 import FAIcon from "@/components/FAIcon.vue";
diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedEndpointsView.vue b/src/Frontend/src/views/throughputreport/queues/DetectedEndpointsView.vue
similarity index 88%
rename from src/Frontend/src/views/throughputreport/endpoints/DetectedEndpointsView.vue
rename to src/Frontend/src/views/throughputreport/queues/DetectedEndpointsView.vue
index 9366e44294..a6d3b91e40 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/DetectedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedEndpointsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import DetectedListView from "@/views/throughputreport/endpoints/DetectedListView.vue";
-import { DataSource } from "@/views/throughputreport/endpoints/dataSource";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import DetectedListView from "@/views/throughputreport/queues/DetectedListView.vue";
+import { DataSource } from "@/views/throughputreport/queues/dataSource";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator";
 import routeLinks from "@/router/routeLinks";
 import { storeToRefs } from "pinia";
 import FAIcon from "@/components/FAIcon.vue";
diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts b/src/Frontend/src/views/throughputreport/queues/DetectedListView.spec.ts
similarity index 81%
rename from src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts
rename to src/Frontend/src/views/throughputreport/queues/DetectedListView.spec.ts
index 1709c4d031..fd18085709 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedListView.spec.ts
@@ -4,9 +4,9 @@ import { Transport } from "@/views/throughputreport/transport";
 import { makeDriverForTests, render, screen, userEvent } from "@component-test-utils";
 import type { Driver, SetupFactoryOptions } from "../../../../test/driver";
 import { disableMonitoring } from "../../../../test/drivers/vitest/setup";
-import DetectedListView, { type DetectedListViewProps } from "@/views/throughputreport/endpoints/DetectedListView.vue";
-import { DataSource } from "@/views/throughputreport/endpoints/dataSource";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import DetectedListView, { type DetectedListViewProps } from "@/views/throughputreport/queues/DetectedListView.vue";
+import { DataSource } from "@/views/throughputreport/queues/dataSource";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator";
 import { within } from "@testing-library/vue";
 import type UpdateUserIndicator from "@/resources/UpdateUserIndicator";
 import { serviceControlWithThroughput } from "@/views/throughputreport/serviceControlWithThroughput";
@@ -62,8 +62,8 @@ describe("DetectedListView tests", () => {
       await renderComponent({}, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            { name: "I am a queue", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 10 },
-            { name: "I am an endpoint", is_known_endpoint: true, user_indicator: "", max_daily_throughput: 100 },
+            { name: "I am a queue", name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 10 },
+            { name: "I am an endpoint", name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: 100 },
           ])
         );
       });
@@ -76,8 +76,8 @@ describe("DetectedListView tests", () => {
       await renderComponent({ source: DataSource.WellKnownEndpoint }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            { name: "I am a queue", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 10 },
-            { name: "I am an endpoint", is_known_endpoint: true, user_indicator: "", max_daily_throughput: 100 },
+            { name: "I am a queue", name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 10 },
+            { name: "I am an endpoint", name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: 100 },
           ])
         );
       });
@@ -104,9 +104,9 @@ describe("DetectedListView tests", () => {
       await renderComponent({ source: DataSource.WellKnownEndpoint }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            ...[...Array(10).keys()].map((i) => ({ name: `Alpha${i}`, is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
-            ...[...Array(10).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
-            ...[...Array(10).keys()].map((i) => ({ name: `${i}Delta${i}`, is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `Alpha${i}`, name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `${i}Delta${i}`, name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
           ])
         );
       });
@@ -141,9 +141,9 @@ describe("DetectedListView tests", () => {
       await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.NServiceBusEndpoint] }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            ...[...Array(10).keys()].map((i) => ({ name: `Alpha${i}`, is_known_endpoint: false, user_indicator: "", max_daily_throughput: i })),
-            ...[...Array(10).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: i })),
-            ...[...Array(10).keys()].map((i) => ({ name: `${i}Delta${i}`, is_known_endpoint: false, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `Alpha${i}`, name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `${i}Delta${i}`, name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: i })),
           ])
         );
       });
@@ -163,10 +163,10 @@ describe("DetectedListView tests", () => {
       await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.NServiceBusEndpoint], ariaLabel: tableName }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            ...[...Array(5).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
-            ...[...Array(8).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
-            ...[...Array(2).keys()].map((i) => ({ name: `${i}Delta${i}`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
-            { name: "boo", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 11 },
+            ...[...Array(5).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
+            ...[...Array(8).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
+            ...[...Array(2).keys()].map((i) => ({ name: `${i}Delta${i}`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
+            { name: "boo", name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 11 },
           ])
         );
       });
@@ -193,7 +193,9 @@ describe("DetectedListView tests", () => {
       const dataLength = 5;
 
       await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.NServiceBusEndpoint], ariaLabel: tableName }, async (driver) => {
-        await driver.setUp(precondition.hasLicensingEndpoints([...[...Array(dataLength).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i }))]));
+        await driver.setUp(
+          precondition.hasLicensingEndpoints([...[...Array(dataLength).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i }))])
+        );
       });
 
       const user = userEvent.setup();
@@ -243,7 +245,7 @@ describe("DetectedListView tests", () => {
       ];
 
       await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.NServiceBusEndpoint], ariaLabel: tableName }, async (driver) => {
-        await driver.setUp(precondition.hasLicensingEndpoints([...[...unsortedNames].map((name, idx) => ({ name, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: idx }))]));
+        await driver.setUp(precondition.hasLicensingEndpoints([...[...unsortedNames].map((name, idx) => ({ name, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: idx }))]));
       });
 
       const user = userEvent.setup();
@@ -294,8 +296,8 @@ describe("DetectedListView tests", () => {
       const { driver } = await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.PlannedToDecommission, UserIndicator.NServiceBusEndpoint], ariaLabel: tableName }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            { name: `Not set yet`, is_known_endpoint: false, user_indicator: "", max_daily_throughput: 100 },
-            { name: `Set and needs updating`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: 50 },
+            { name: `Not set yet`, name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 100 },
+            { name: `Set and needs updating`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: 50 },
           ])
         );
         await driver.setUp(updateLicensingEndpoints());
@@ -307,8 +309,8 @@ describe("DetectedListView tests", () => {
 
       await driver.setUp(
         precondition.hasLicensingEndpoints([
-          { name: `Not set yet`, is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: 100 },
-          { name: `Set and needs updating`, is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: 50 },
+          { name: `Not set yet`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: 100 },
+          { name: `Set and needs updating`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: 50 },
         ])
       );
 
diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
similarity index 86%
rename from src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue
rename to src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
index 210f76dc0e..c5ce4aa4b1 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type EndpointThroughputSummary from "@/resources/EndpointThroughputSummary";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import type QueueThroughputSummary from "@/resources/QueueThroughputSummary.ts";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator.ts";
 import DropDown, { type Item } from "@/components/DropDown.vue";
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import createThroughputClient from "@/views/throughputreport/throughputClient";
 import type UpdateUserIndicator from "@/resources/UpdateUserIndicator";
 import { TYPE } from "vue-toastification";
-import { DataSource } from "@/views/throughputreport/endpoints/dataSource";
-import { userIndicatorMapper } from "./userIndicatorMapper";
+import { DataSource } from "@/views/throughputreport/queues/dataSource.ts";
+import { userIndicatorMapper } from "./userIndicatorMapper.ts";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import { useShowToast } from "@/composables/toast";
 import ResultsCount from "@/components/ResultsCount.vue";
-import { useHiddenFeature } from "./useHiddenFeature";
+import { useHiddenFeature } from "./useHiddenFeature.ts";
 import FAIcon from "@/components/FAIcon.vue";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { useLicenseStore } from "@/stores/LicenseStore";
@@ -26,13 +26,13 @@ enum NameFilterType {
 interface SortData {
   text: string;
   value: string;
-  comparer: (a: EndpointThroughputSummary, b: EndpointThroughputSummary) => number;
+  comparer: (a: QueueThroughputSummary, b: QueueThroughputSummary) => number;
 }
 
 const sortData: SortData[] = [
-  { text: "name", comparer: (a: EndpointThroughputSummary, b: EndpointThroughputSummary) => a.name.localeCompare(b.name) },
-  { text: "throughput", comparer: (a: EndpointThroughputSummary, b: EndpointThroughputSummary) => a.max_daily_throughput - b.max_daily_throughput },
-  { text: "endpoint type", comparer: (a: EndpointThroughputSummary, b: EndpointThroughputSummary) => a.user_indicator.localeCompare(b.user_indicator) },
+  { text: "name", comparer: (a: QueueThroughputSummary, b: QueueThroughputSummary) => a.name.localeCompare(b.name) },
+  { text: "throughput", comparer: (a: QueueThroughputSummary, b: QueueThroughputSummary) => a.max_daily_throughput - b.max_daily_throughput },
+  { text: "endpoint type", comparer: (a: QueueThroughputSummary, b: QueueThroughputSummary) => a.user_indicator.localeCompare(b.user_indicator) },
 ].flatMap((item) => {
   return [
     { text: item.text, value: item.text, comparer: item.comparer },
@@ -50,7 +50,7 @@ export interface DetectedListViewProps {
 
 const props = defineProps<DetectedListViewProps>();
 
-const data = ref<EndpointThroughputSummary[]>([]);
+const data = ref<QueueThroughputSummary[]>([]);
 const dataChanges = ref(new Map<string, { indicator: string }>());
 const filterData = reactive({ name: "", nameFilterType: NameFilterType.beginsWith, sort: "name", showUnsetOnly: false });
 
@@ -58,9 +58,9 @@ const licenseStore = useLicenseStore();
 const { license } = licenseStore;
 
 const filterNameOptions = [
-  { text: NameFilterType.beginsWith, filter: (a: EndpointThroughputSummary) => a.name.toLowerCase().startsWith(filterData.name.toLowerCase()) },
-  { text: NameFilterType.contains, filter: (a: EndpointThroughputSummary) => a.name.toLowerCase().includes(filterData.name.toLowerCase()) },
-  { text: NameFilterType.endsWith, filter: (a: EndpointThroughputSummary) => a.name.toLowerCase().endsWith(filterData.name.toLowerCase()) },
+  { text: NameFilterType.beginsWith, filter: (a: QueueThroughputSummary) => a.name.toLowerCase().startsWith(filterData.name.toLowerCase()) },
+  { text: NameFilterType.contains, filter: (a: QueueThroughputSummary) => a.name.toLowerCase().includes(filterData.name.toLowerCase()) },
+  { text: NameFilterType.endsWith, filter: (a: QueueThroughputSummary) => a.name.toLowerCase().endsWith(filterData.name.toLowerCase()) },
 ];
 const filteredData = computed(() => {
   const sortItem = sortData.find((value) => value.value === filterData.sort);
@@ -105,7 +105,7 @@ function proceedWithChangesWarning() {
 }
 
 async function loadData() {
-  const results = await throughputClient.endpoints();
+  const results = await throughputClient.queues();
 
   data.value = results.filter((row) => row.is_known_endpoint === (props.source === DataSource.WellKnownEndpoint));
 }
@@ -153,7 +153,7 @@ function showUnsetChanged(event: Event) {
 
 const bulkOperation = ref<UserIndicator>(UserIndicator.NServiceBusEndpoint);
 
-function getDefaultEndpointType(row: EndpointThroughputSummary) {
+function getDefaultEndpointType(row: QueueThroughputSummary) {
   if (row.is_known_endpoint) {
     return UserIndicator.NServiceBusEndpoint.toString();
   }
@@ -252,6 +252,7 @@ async function save() {
             {{ row.name }}
           </div>
         </td>
+        <!--TODO: this needs to show average monthly, not max-->
         <td v-if="showMonthly" class="col text-end formatThroughputColumn" style="width: 250px" aria-label="maximum usage throughput">{{ row.max_monthly_throughput ? row.max_monthly_throughput.toLocaleString() : "0" }}</td>
         <td v-else class="col text-end formatThroughputColumn" style="width: 250px" aria-label="maximum usage throughput">{{ row.max_daily_throughput.toLocaleString() }}</td>
         <td class="col" style="width: 350px" aria-label="endpoint type">
diff --git a/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue b/src/Frontend/src/views/throughputreport/queues/InlineThroughputGraph.vue
similarity index 88%
rename from src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue
rename to src/Frontend/src/views/throughputreport/queues/InlineThroughputGraph.vue
index 3281f4cc5e..99c93d9ff5 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue
+++ b/src/Frontend/src/views/throughputreport/queues/InlineThroughputGraph.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import ThroughputGraph from "./ThroughputGraph.vue";
-import type { MonthlyThroughput } from "@/resources/EndpointThroughputSummary.ts";
+import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary.ts";
 import FAIcon from "@/components/FAIcon.vue";
 import { faLineChart } from "@fortawesome/free-solid-svg-icons";
 
@@ -47,6 +47,11 @@ const showContent = ref(false);
   box-shadow: 1px 2px 3px hsl(var(--shadow-color));
 }
 
+.position-right .graph {
+  left: unset;
+  right: 20%;
+}
+
 .graph-container:hover .graph,
 .graph-container.showContent .graph,
 .graph-container:has(svg:focus) .graph {
diff --git a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue b/src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue
similarity index 97%
rename from src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue
rename to src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue
index afd23f7927..a9693b6456 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue
+++ b/src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MonthlyThroughput } from "@/resources/EndpointThroughputSummary";
+import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary";
 import { computed } from "vue";
 
 const props = defineProps<{ data: MonthlyThroughput[] }>();
diff --git a/src/Frontend/src/views/throughputreport/endpoints/dataSource.ts b/src/Frontend/src/views/throughputreport/queues/dataSource.ts
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/dataSource.ts
rename to src/Frontend/src/views/throughputreport/queues/dataSource.ts
diff --git a/src/Frontend/src/views/throughputreport/endpoints/useHiddenFeature.ts b/src/Frontend/src/views/throughputreport/queues/useHiddenFeature.ts
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/useHiddenFeature.ts
rename to src/Frontend/src/views/throughputreport/queues/useHiddenFeature.ts
diff --git a/src/Frontend/src/views/throughputreport/endpoints/userIndicator.ts b/src/Frontend/src/views/throughputreport/queues/userIndicator.ts
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/userIndicator.ts
rename to src/Frontend/src/views/throughputreport/queues/userIndicator.ts
diff --git a/src/Frontend/src/views/throughputreport/endpoints/userIndicatorMapper.ts b/src/Frontend/src/views/throughputreport/queues/userIndicatorMapper.ts
similarity index 89%
rename from src/Frontend/src/views/throughputreport/endpoints/userIndicatorMapper.ts
rename to src/Frontend/src/views/throughputreport/queues/userIndicatorMapper.ts
index 09f5c8d0df..7ae3d57da1 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/userIndicatorMapper.ts
+++ b/src/Frontend/src/views/throughputreport/queues/userIndicatorMapper.ts
@@ -1,4 +1,4 @@
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator";
 
 export const userIndicatorMapper = new Map<UserIndicator, string>([
   [UserIndicator.NServiceBusEndpoint, "NServiceBus Endpoint"],
diff --git a/src/Frontend/src/views/throughputreport/throughputClient.ts b/src/Frontend/src/views/throughputreport/throughputClient.ts
index 704d815c56..973347b50a 100644
--- a/src/Frontend/src/views/throughputreport/throughputClient.ts
+++ b/src/Frontend/src/views/throughputreport/throughputClient.ts
@@ -1,4 +1,4 @@
-import type EndpointThroughputSummary from "@/resources/EndpointThroughputSummary";
+import type QueueThroughputSummary from "@/resources/QueueThroughputSummary";
 import type UpdateUserIndicator from "@/resources/UpdateUserIndicator";
 import type ConnectionTestResults from "@/resources/ConnectionTestResults";
 import type ThroughputConnectionSettings from "@/resources/ThroughputConnectionSettings";
@@ -10,8 +10,8 @@ import serviceControlClient from "@/components/serviceControlClient";
 class ThroughputClient {
   constructor(readonly basePath: string) {}
 
-  public async endpoints() {
-    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<EndpointThroughputSummary[]>(`${this.basePath}/endpoints`);
+  public async queues() {
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<QueueThroughputSummary[]>(`${this.basePath}/endpoints`);
 
     return data;
   }
diff --git a/src/Frontend/test/preconditions/hasLicensingEndpoints.ts b/src/Frontend/test/preconditions/hasLicensingEndpoints.ts
index c4131a96d8..c2e810a751 100644
--- a/src/Frontend/test/preconditions/hasLicensingEndpoints.ts
+++ b/src/Frontend/test/preconditions/hasLicensingEndpoints.ts
@@ -1,10 +1,10 @@
 import type { SetupFactoryOptions } from "../driver";
-import type EndpointThroughputSummary from "@/resources/EndpointThroughputSummary";
+import type QueueThroughputSummary from "@/resources/QueueThroughputSummary";
 
 export const hasLicensingEndpoints =
   (
-    body: EndpointThroughputSummary[] = [
-      <EndpointThroughputSummary>{
+    body: QueueThroughputSummary[] = [
+      <QueueThroughputSummary>{
         name: "Sender",
         is_known_endpoint: true,
         user_indicator: "",

From 32f3cf3071b31d027130a0813824f02ed6336167 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 10 Jul 2026 15:54:10 +0800
Subject: [PATCH 02/30] migrate endpoint throughput graph logic

---
 .../endpoints/EndpointDetails.vue             | 43 +++++++++++--------
 .../throughputreport/endpoints/QueueName.vue  | 10 ++---
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
index 1867cbb91b..1370617188 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
@@ -1,26 +1,27 @@
 <script setup lang="ts">
 import type { Endpoint } from "./types";
 import QueueData from "./QueueData.vue";
-
-// import { computed } from "vue";
-// import { compare } from "./utilities";
+import { computed } from "vue";
+import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary.ts";
+import ThroughputGraph from "../queues/ThroughputGraph.vue";
 
 const props = defineProps<{ endpoint: Endpoint }>();
 
-// const throughput = computed(() =>
-//   props.endpoint.queues.every((queue) => queue.throughputByMonth.length || queue.throughput === 0)
-//     ? [
-//         ...props.endpoint.queues
-//           .flatMap((queue) => queue.throughputByMonth)
-//           .reduce((result, [month, value]) => {
-//             const existing = result.getOrInsert(month, 0);
-//             result.set(month, existing + value);
-//             return result;
-//           }, new Map()),
-//       ].sort(([x1], [x2]) => compare(x1, x2))
-//     : [],
-// );
-// const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => compare(q1.simplifiedName.toLowerCase(), q2.simplifiedName.toLowerCase())));
+const throughputByMonth = computed(() =>
+  [
+    ...props.endpoint.queues
+      .flatMap((queue) => queue.details?.monthly_throughput ?? [])
+      .reduce((result, { month, throughput }) => {
+        const existing = (result as any).getOrInsert(month, 0);
+        result.set(month, existing + throughput);
+        return result;
+      }, new Map()),
+  ]
+    .toSorted(([x1], [x2]) => x1.localeCompare(x2))
+    .map(([month, throughput]) => ({ month, throughput }) as MonthlyThroughput)
+);
+const totalThroughput = computed(() => throughputByMonth.value.map((tbm) => tbm.throughput).reduce((result, amount) => result + amount, 0));
+const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q1.details?.name.toLowerCase().localeCompare(q2.details?.name.toLowerCase())));
 </script>
 
 <template>
@@ -29,13 +30,16 @@ const props = defineProps<{ endpoint: Endpoint }>();
       <div class="details-item">
         <label>Licensed Size</label><span>{{ endpoint.endpointSize }}</span>
       </div>
+      <div class="details-item">
+        <label>Total Throughput</label><span>{{ totalThroughput }}</span>
+      </div>
       <div class="details-item">
         <label>Current Size</label><span>{{ endpoint.endpointSize }}</span>
       </div>
     </div>
-    <!-- <ThroughputGraph :data="throughput" class="graph" v-if="throughput.length" /> -->
+    <ThroughputGraph :data="throughputByMonth" class="graph" v-if="throughputByMonth.length" />
     <div class="queue-data">
-      <QueueData :queues="endpoint.queues" />
+      <QueueData :queues="sortedQueues" />
     </div>
   </div>
 </template>
@@ -56,6 +60,7 @@ const props = defineProps<{ endpoint: Endpoint }>();
 
 .graph {
   grid-area: graph;
+  height: 7rem;
   margin-bottom: 1rem;
   justify-self: flex-end;
 }
diff --git a/src/Frontend/src/views/throughputreport/endpoints/QueueName.vue b/src/Frontend/src/views/throughputreport/endpoints/QueueName.vue
index 0318789125..4d2837c1b2 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/QueueName.vue
+++ b/src/Frontend/src/views/throughputreport/endpoints/QueueName.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { Queue } from "./types";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import ExclamationMark from "@/components/ExclamationMark.vue";
+import { WarningLevel } from "@/components/WarningLevel";
 
 defineProps<{ queue: Queue }>();
 </script>
@@ -8,7 +11,8 @@ defineProps<{ queue: Queue }>();
   <div class="queue-name">
     <span>
       <span class="scope" v-if="queue.scope != null">{{ queue.scope }}</span>
-      <span class="name">{{ queue.details?.name ?? queue.nameHash }}</span>
+      <span class="name" v-if="queue.details">{{ queue.details.name }}</span>
+      <ExclamationMark v-else :icon="faWarning" :type="WarningLevel.Danger" title="A queue existed when the usage report for the last license was generated which no longer exists. Please contact Particular Support" />
     </span>
   </div>
 </template>
@@ -17,10 +21,6 @@ defineProps<{ queue: Queue }>();
 .queue-name {
   display: flex;
   flex-direction: column;
-  font-family:
-    Consolas,
-    Lucida Console,
-    monospace;
 }
 
 .scope {

From d342ae02b8fd776584209fe6aeef2f1c92229bb9 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 13 Jul 2026 08:07:31 +0800
Subject: [PATCH 03/30] make throughput graph points larger to make hovering
 easier

---
 .../src/views/throughputreport/queues/ThroughputGraph.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue b/src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue
index a9693b6456..af311ed1f3 100644
--- a/src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue
+++ b/src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue
@@ -43,12 +43,12 @@ const dots = computed(() =>
 <template>
   <div class="graph" :style="{ '--pips': reportPeriod.length * 2 }">
     <div class="graph-content">
-      <svg class="graph-content" :viewBox="`-0.2 -0.03 ${reportPeriod.length * 2 + 0.1} 1.07`" preserveAspectRatio="none">
+      <svg class="graph-content" :viewBox="`-0.3 -0.07 ${reportPeriod.length * 2 + 0.1} 1.15`" preserveAspectRatio="none">
         <line v-for="({ x1, y1, x2, y2, isPartMonth }, i) in lines" :key="i" :x1="x1 * 2" :y1="y1" :x2="x2 * 2" :y2="y2" stroke="var(--bs-primary)" stroke-width="1" :stroke-dasharray="isPartMonth ? 4 : 0" vector-effect="non-scaling-stroke" />
         <line v-for="(_, pip) in reportPeriod" :key="pip" :x1="pip * 2" y1="1.07" :x2="pip * 2" y2="1" stroke="var(--bs-body-color)" stroke-width="1" vector-effect="non-scaling-stroke" />
         <g v-for="{ pip, value } in dots" :key="pip">
           <title>{{ value.toLocaleString() }}</title>
-          <path r="1" :cx="pip * 2" :cy="1 - value / maxValue" :d="`M ${pip * 2} ${1 - value / maxValue} l 0.0001 0`" vector-effect="non-scaling-stroke" stroke-width="5" stroke-linecap="round" :stroke="value === 0 ? 'red' : 'var(--bs-primary)'" />
+          <path :d="`M ${pip * 2} ${1 - value / maxValue} l 0.0001 0`" vector-effect="non-scaling-stroke" stroke-width="7.5" stroke-linecap="round" :stroke="value === 0 ? 'red' : 'var(--bs-primary)'" />
         </g>
       </svg>
       <div class="y-axis">

From 048d4ee54d56a33604c984a41f1589e06102ee7b Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 13 Jul 2026 08:11:47 +0800
Subject: [PATCH 04/30] change hidden feature toggle combo to something that
 isn't likely to be used as part of normal keyboard scrolling

---
 .../src/views/throughputreport/queues/DetectedListView.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
index c5ce4aa4b1..7bd283e123 100644
--- a/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
@@ -76,7 +76,7 @@ const filteredData = computed(() => {
     .sort(sortItem?.comparer);
 });
 // We can remove this hidden toggle once we have new edition licenses.
-const hiddenFeatureToggle = useHiddenFeature(["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown"]);
+const hiddenFeatureToggle = useHiddenFeature(["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "m"]);
 const showMonthly = computed(() => license.edition === "MonthlyUsage" || hiddenFeatureToggle.value);
 
 const throughputClient = createThroughputClient();

From a38e05ed5d73b384ef19ff2a57927c9c0b04783e Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 13 Jul 2026 09:45:05 +0800
Subject: [PATCH 05/30] include endpoint size calculations

---
 .../endpoints/EndpointDetails.vue             | 11 ++---
 .../endpoints/EndpointHeader.vue              |  2 +-
 .../endpoints/LicensedEndpointsView.vue       | 37 +++++++++++---
 .../throughputreport/endpoints/QueueData.vue  |  2 +-
 .../views/throughputreport/endpoints/types.ts | 49 +++++++++++++++++--
 5 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
index 1370617188..e0193ebfb4 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
@@ -20,21 +20,20 @@ const throughputByMonth = computed(() =>
     .toSorted(([x1], [x2]) => x1.localeCompare(x2))
     .map(([month, throughput]) => ({ month, throughput }) as MonthlyThroughput)
 );
-const totalThroughput = computed(() => throughputByMonth.value.map((tbm) => tbm.throughput).reduce((result, amount) => result + amount, 0));
 const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q1.details?.name.toLowerCase().localeCompare(q2.details?.name.toLowerCase())));
 </script>
 
 <template>
   <div class="card-body" :key="endpoint.clientId">
     <div class="details">
-      <div class="details-item">
-        <label>Licensed Size</label><span>{{ endpoint.endpointSize }}</span>
+      <div class="details-item" :title="endpoint.endpointSize.throughputText">
+        <label>Licensed Size</label><span>{{ endpoint.endpointSize.name }}</span>
       </div>
       <div class="details-item">
-        <label>Total Throughput</label><span>{{ totalThroughput }}</span>
+        <label>Total Throughput</label><span>{{ endpoint.totalThroughput.toLocaleString() }}</span>
       </div>
-      <div class="details-item">
-        <label>Current Size</label><span>{{ endpoint.endpointSize }}</span>
+      <div class="details-item" :title="endpoint.currentSize.throughputText">
+        <label>Current Size</label><span>{{ endpoint.currentSize.name }}</span>
       </div>
     </div>
     <ThroughputGraph :data="throughputByMonth" class="graph" v-if="throughputByMonth.length" />
diff --git a/src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue b/src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue
index d4d0aaabdc..b605aef144 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue
+++ b/src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue
@@ -39,7 +39,7 @@ watch(
     </div>
     <div>
       <label>Classification:</label>
-      <select v-model="endpoint.classification" class="form-select">
+      <select v-model="endpoint.classification" class="form-select" disabled>
         <option v-for="[name, classification] in Object.entries(EndpointClassification).filter(([, classification]) => !isNaN(Number(classification)))" :value="classification">{{ name }}</option>
       </select>
     </div>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue
index 9abebae84c..770afa53df 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue
@@ -2,7 +2,7 @@
 import DataView from "@/components/DataView.vue";
 import { onMounted, ref } from "vue";
 import CollapsedEndpoint from "./CollapsedEndpoint.vue";
-import type { Endpoint, Queue } from "./types.ts";
+import { Endpoint, EndpointSize, type Queue } from "./types.ts";
 import EndpointHeader from "./EndpointHeader.vue";
 import EndpointDetails from "./EndpointDetails.vue";
 import createThroughputClient from "@/views/throughputreport/throughputClient";
@@ -10,6 +10,26 @@ import createThroughputClient from "@/views/throughputreport/throughputClient";
 const endpoints = ref<Endpoint[]>([]);
 const collapsedEndpoints = ref(new Map());
 
+//TODO: get from the metadata file
+const endpointSizes = [
+  new EndpointSize("4", 0, 4),
+  new EndpointSize("16", 4, 16),
+  new EndpointSize("64", 16, 64),
+  new EndpointSize("256", 64, 256),
+  new EndpointSize("1024", 256, 1_024),
+  new EndpointSize("4K", 1_024, 4_096),
+  new EndpointSize("16K", 4_096, 16_384),
+  new EndpointSize("64K", 16_384, 65_536),
+  new EndpointSize("256K", 65_536, 262_144),
+  new EndpointSize("1024K", 262_144, 1_048_576),
+  new EndpointSize("4M", 1_048_576, 4_194_304),
+  new EndpointSize("16M", 4_194_304, 16_777_216),
+  new EndpointSize("64M", 16_777_216, 67_108_864),
+  new EndpointSize("256M", 67_108_864, 268_435_456),
+  new EndpointSize("1024M", 268_435_456, 1_073_741_824),
+  new EndpointSize("U", 1_073_741_824, null),
+];
+
 onMounted(async () => {
   const sample: any = await import("./sample.json");
   const throughputClient = createThroughputClient();
@@ -17,12 +37,10 @@ onMounted(async () => {
 
   endpoints.value = sample.endpoints.map(
     (metaEp: any) =>
-      ({
-        clientId: crypto.randomUUID(),
-        name: metaEp.name,
-        classification: metaEp.classification,
-        endpointSize: metaEp.endpointSize,
-        queues: metaEp.queues.map(
+      new Endpoint(
+        crypto.randomUUID(),
+        metaEp.name,
+        metaEp.queues.map(
           (metaQ: any) =>
             ({
               nameHash: metaQ.nameHash,
@@ -30,7 +48,10 @@ onMounted(async () => {
               details: scQueues.find((scQ) => scQ.name_hash === metaQ.nameHash),
             }) as Queue
         ),
-      }) as Endpoint
+        metaEp.classification,
+        endpointSizes.find((es) => es.name === metaEp.endpointSize)!,
+        endpointSizes
+      )
   );
 });
 </script>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/QueueData.vue b/src/Frontend/src/views/throughputreport/endpoints/QueueData.vue
index 2e23671072..e3891fca2e 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/QueueData.vue
+++ b/src/Frontend/src/views/throughputreport/endpoints/QueueData.vue
@@ -31,7 +31,7 @@ const props = defineProps<{
               <div class="throughput">
                 <InlineThroughputGraph class="position-right" v-if="queue.details?.monthly_throughput?.length" :data="queue.details.monthly_throughput" />
                 <!-- {{ NumberFormat.format(queue.averageMonthlyThroughput) }} -->
-                {{ queue.details?.max_monthly_throughput }}
+                {{ queue.details?.max_monthly_throughput?.toLocaleString() }}
               </div>
             </td>
             <td v-if="actionsComponent">
diff --git a/src/Frontend/src/views/throughputreport/endpoints/types.ts b/src/Frontend/src/views/throughputreport/endpoints/types.ts
index caef2472b3..2b9f657ebe 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/types.ts
+++ b/src/Frontend/src/views/throughputreport/endpoints/types.ts
@@ -11,10 +11,49 @@ export interface Queue {
   details: QueueThroughputSummary;
 }
 
-export interface Endpoint {
-  clientId: string;
+export class Endpoint {
+  readonly clientId: string;
   name: string;
-  queues: Queue[];
-  classification: EndpointClassification;
-  endpointSize: string;
+  readonly queues: Queue[];
+  readonly classification: EndpointClassification;
+  readonly endpointSize: EndpointSize;
+  readonly availableSizes: EndpointSize[];
+
+  constructor(clientId: string, name: string, queues: Queue[], classification: EndpointClassification, endpointSize: EndpointSize, availableSizes: EndpointSize[]) {
+    this.clientId = clientId;
+    this.name = name;
+    this.queues = queues;
+    this.classification = classification;
+    this.endpointSize = endpointSize;
+    this.availableSizes = availableSizes;
+  }
+
+  get totalThroughput() {
+    return this.queues.map((queue) => queue.details?.max_monthly_throughput ?? 0).reduce((total, value) => total + value, 0);
+  }
+
+  get currentSize() {
+    return this.availableSizes.find((size) => size.throughputMin <= this.totalThroughput && (size.throughputMax ?? Number.MAX_VALUE) > this.totalThroughput)!;
+  }
+}
+
+export class EndpointSize {
+  readonly name: string;
+  readonly throughputMin: number;
+  readonly throughputMax: number | null;
+
+  constructor(name: string, throughputMin: number, throughputMax: number | null) {
+    this.name = name;
+    this.throughputMin = throughputMin;
+    this.throughputMax = throughputMax;
+  }
+
+  get throughputText() {
+    switch (this.throughputMax) {
+      case null:
+        return "Unlimited";
+      default:
+        return `between ${this.throughputMin.toLocaleString()} and ${this.throughputMax.toLocaleString()} messages per month`;
+    }
+  }
 }

From 28518ee4560fcd19cf11d25a7500afc098f6051a Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 13 Jul 2026 12:20:36 +0800
Subject: [PATCH 06/30] introduce second level of navigation for non-endpoint
 queues

---
 src/Frontend/src/router/config.ts             | 30 +++++++++++++----
 src/Frontend/src/router/routeLinks.ts         |  4 ++-
 .../views/throughputreport/EndpointsView.vue  |  4 +--
 .../CollapsedEndpoint.vue                     |  0
 .../EndpointData.vue                          | 32 ++++++-------------
 .../EndpointDetails.vue                       |  2 +-
 .../EndpointHeader.vue                        |  0
 .../licenseDetails/ExcludedQueuesView.vue     |  3 ++
 .../InfrastructureQueuesView.vue              |  3 ++
 .../licenseDetails/LicenseDetails.vue         | 27 ++++++++++++++++
 .../LicensedEndpointsView.vue                 |  0
 .../QueueData.vue                             |  0
 .../QueueName.vue                             |  0
 .../{endpoints => licenseDetails}/types.ts    |  0
 14 files changed, 73 insertions(+), 32 deletions(-)
 rename src/Frontend/src/views/throughputreport/{endpoints => licenseDetails}/CollapsedEndpoint.vue (100%)
 rename src/Frontend/src/views/throughputreport/{endpoints => licenseDetails}/EndpointData.vue (66%)
 rename src/Frontend/src/views/throughputreport/{endpoints => licenseDetails}/EndpointDetails.vue (98%)
 rename src/Frontend/src/views/throughputreport/{endpoints => licenseDetails}/EndpointHeader.vue (100%)
 create mode 100644 src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
 create mode 100644 src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue
 create mode 100644 src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
 rename src/Frontend/src/views/throughputreport/{endpoints => licenseDetails}/LicensedEndpointsView.vue (100%)
 rename src/Frontend/src/views/throughputreport/{endpoints => licenseDetails}/QueueData.vue (100%)
 rename src/Frontend/src/views/throughputreport/{endpoints => licenseDetails}/QueueName.vue (100%)
 rename src/Frontend/src/views/throughputreport/{endpoints => licenseDetails}/types.ts (100%)

diff --git a/src/Frontend/src/router/config.ts b/src/Frontend/src/router/config.ts
index 5fbf5633fe..41e858a09d 100644
--- a/src/Frontend/src/router/config.ts
+++ b/src/Frontend/src/router/config.ts
@@ -169,15 +169,33 @@ const config: RouteItem[] = [
         ],
       },
       {
-        title: "Endpoints",
-        path: routeLinks.throughput.endpoints.root,
-        redirect: routeLinks.throughput.endpoints.licensedEndpoints.link,
+        title: "License Details",
+        path: routeLinks.throughput.licenseDetails.root,
+        redirect: routeLinks.throughput.licenseDetails.licensedEndpoints.link,
         component: () => import("@/views/throughputreport/EndpointsView.vue"),
         children: [
           {
-            title: "Licensed Endpoints",
-            path: routeLinks.throughput.endpoints.licensedEndpoints.template,
-            component: () => import("@/views/throughputreport/endpoints/LicensedEndpointsView.vue"),
+            title: "License Details",
+            path: routeLinks.throughput.licenseDetails.root,
+            redirect: routeLinks.throughput.licenseDetails.licensedEndpoints.link,
+            component: () => import("@/views/throughputreport/licenseDetails/LicenseDetails.vue"),
+            children: [
+              {
+                title: "Licensed Endpoints",
+                path: routeLinks.throughput.licenseDetails.licensedEndpoints.template,
+                component: () => import("@/views/throughputreport/licenseDetails/LicensedEndpointsView.vue"),
+              },
+              {
+                title: "Infrastructure Queues",
+                path: routeLinks.throughput.licenseDetails.infrastructureQueues.template,
+                component: () => import("@/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue"),
+              },
+              {
+                title: "Excluded Queues",
+                path: routeLinks.throughput.licenseDetails.excludedQueues.template,
+                component: () => import("@/views/throughputreport/licenseDetails/ExcludedQueuesView.vue"),
+              },
+            ],
           },
         ],
       },
diff --git a/src/Frontend/src/router/routeLinks.ts b/src/Frontend/src/router/routeLinks.ts
index 430fa782e1..00615a46aa 100644
--- a/src/Frontend/src/router/routeLinks.ts
+++ b/src/Frontend/src/router/routeLinks.ts
@@ -59,7 +59,7 @@ const throughputLinks = (root: string) => {
   return {
     root: root,
     queues: throughputQueuesLinks(`${root}/queues`),
-    endpoints: throughputEndpointLinks(`${root}/endpoints`),
+    licenseDetails: throughputEndpointLinks(`${root}/license-details`),
     setup: throughputSetupLinks(`${root}/setup`),
   };
 };
@@ -97,6 +97,8 @@ const throughputEndpointLinks = (root: string) => {
   return {
     root,
     licensedEndpoints: createLink("licensed"),
+    infrastructureQueues: createLink("infrastructure"),
+    excludedQueues: createLink("excluded"),
   };
 };
 
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index 2b56e7c3ba..bf35c6804b 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -62,8 +62,8 @@ function toggleOptionsLegendVisible() {
           <h5 v-if="isBrokerTransport" class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedBrokerQueues.link) }">
             <RouterLink :to="routeLinks.throughput.queues.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
           </h5>
-          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.endpoints.licensedEndpoints.link) }">
-            <RouterLink :to="routeLinks.throughput.endpoints.licensedEndpoints.link">Licensed Endpoints</RouterLink>
+          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
+            <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">License Details</RouterLink>
           </h5>
         </div>
       </div>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/CollapsedEndpoint.vue b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/CollapsedEndpoint.vue
rename to src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
diff --git a/src/Frontend/src/views/throughputreport/endpoints/EndpointData.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointData.vue
similarity index 66%
rename from src/Frontend/src/views/throughputreport/endpoints/EndpointData.vue
rename to src/Frontend/src/views/throughputreport/licenseDetails/EndpointData.vue
index 636ae772d3..1aa27811fe 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/EndpointData.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointData.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { ref } from 'vue';
-import EndpointDetails from './EndpointDetails.vue';
-import EndpointHeader from './EndpointHeader.vue';
-import CollapsedEndpoint from './CollapsedEndpoint.vue';
-import PageControl from './components/PageControl.vue';
-import { setEndpointElementReference } from './model/tabModel';
-import useEndpointListModel from './model/endpointListModel';
+import { ref } from "vue";
+import EndpointDetails from "./EndpointDetails.vue";
+import EndpointHeader from "./EndpointHeader.vue";
+import CollapsedEndpoint from "./CollapsedEndpoint.vue";
+import PageControl from "./components/PageControl.vue";
+import { setEndpointElementReference } from "./model/tabModel.ts";
+import useEndpointListModel from "./model/endpointListModel.ts";
 
 const collapsedEndpoints = ref(new Map());
 const endpointPageModel = useEndpointListModel();
@@ -15,23 +15,11 @@ const { pageItems } = endpointPageModel;
 <template>
   <div class="actions mb-2">
     <div class="backdrop"></div>
-    <PageControl
-      v-model="endpointPageModel"
-      @page-changed="collapsedEndpoints.clear()"
-      :item-desc="(endpoint) => endpoint.name"
-      class="pages"
-    />
-    <button type="button" class="btn btn-primary" @click="pageItems.forEach((endpoint) => collapsedEndpoints.set(endpoint, true))">
-      Collapse All
-    </button>
+    <PageControl v-model="endpointPageModel" @page-changed="collapsedEndpoints.clear()" :item-desc="(endpoint) => endpoint.name" class="pages" />
+    <button type="button" class="btn btn-primary" @click="pageItems.forEach((endpoint) => collapsedEndpoints.set(endpoint, true))">Collapse All</button>
   </div>
   <div class="card mb-3" v-for="endpoint in pageItems" :ref="(el) => setEndpointElementReference(endpoint, el)">
-    <CollapsedEndpoint
-      class="card-header"
-      v-if="collapsedEndpoints.get(endpoint)"
-      :endpoint="endpoint"
-      @expand="collapsedEndpoints.set(endpoint, false)"
-    />
+    <CollapsedEndpoint class="card-header" v-if="collapsedEndpoints.get(endpoint)" :endpoint="endpoint" @expand="collapsedEndpoints.set(endpoint, false)" />
     <template v-else>
       <EndpointHeader :endpoint="endpoint" class="card-header" @collapse="collapsedEndpoints.set(endpoint, true)" />
       <EndpointDetails :endpoint="endpoint" />
diff --git a/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
similarity index 98%
rename from src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
rename to src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
index e0193ebfb4..9f20dd1a10 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Endpoint } from "./types";
+import type { Endpoint } from "./types.ts";
 import QueueData from "./QueueData.vue";
 import { computed } from "vue";
 import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary.ts";
diff --git a/src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/EndpointHeader.vue
rename to src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
new file mode 100644
index 0000000000..886b28d432
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template>Hello</template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue
new file mode 100644
index 0000000000..e519b4170f
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue
@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template></template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
new file mode 100644
index 0000000000..76115e25dc
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import routeLinks from "@/router/routeLinks";
+import isRouteSelected from "@/composables/isRouteSelected";
+</script>
+
+<template>
+  <div class="row mt-2">
+    <div class="col-sm-12">
+      <div class="nav tabs">
+        <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.licensedEndpoints.link) }">
+          <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">Licensed Endpoints</RouterLink>
+        </h5>
+        <h5 class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.infrastructureQueues.link) }">
+          <RouterLink :to="routeLinks.throughput.licenseDetails.infrastructureQueues.link">Infrastructure Queues</RouterLink>
+        </h5>
+        <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.excludedQueues.link) }">
+          <RouterLink :to="routeLinks.throughput.licenseDetails.excludedQueues.link">Excluded Queues</RouterLink>
+        </h5>
+      </div>
+    </div>
+  </div>
+  <div class="intro">
+    <RouterView />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/LicensedEndpointsView.vue
rename to src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
diff --git a/src/Frontend/src/views/throughputreport/endpoints/QueueData.vue b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/QueueData.vue
rename to src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
diff --git a/src/Frontend/src/views/throughputreport/endpoints/QueueName.vue b/src/Frontend/src/views/throughputreport/licenseDetails/QueueName.vue
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/QueueName.vue
rename to src/Frontend/src/views/throughputreport/licenseDetails/QueueName.vue
diff --git a/src/Frontend/src/views/throughputreport/endpoints/types.ts b/src/Frontend/src/views/throughputreport/licenseDetails/types.ts
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/types.ts
rename to src/Frontend/src/views/throughputreport/licenseDetails/types.ts

From cd68a5ae8bb01b4139ead59fc4602b196d3173e1 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 13 Jul 2026 12:39:55 +0800
Subject: [PATCH 07/30] extract data fetch to a store and implement
 infrastructure/excluded queue views

---
 .../src/stores/LicenseDetailsStore.ts         | 61 +++++++++++++++++++
 .../licenseDetails/ExcludedQueuesView.vue     | 15 ++++-
 .../InfrastructureQueuesView.vue              | 15 ++++-
 .../licenseDetails/LicensedEndpointsView.vue  | 55 ++---------------
 4 files changed, 93 insertions(+), 53 deletions(-)
 create mode 100644 src/Frontend/src/stores/LicenseDetailsStore.ts

diff --git a/src/Frontend/src/stores/LicenseDetailsStore.ts b/src/Frontend/src/stores/LicenseDetailsStore.ts
new file mode 100644
index 0000000000..e32b5aedfb
--- /dev/null
+++ b/src/Frontend/src/stores/LicenseDetailsStore.ts
@@ -0,0 +1,61 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { ref } from "vue";
+import createThroughputClient from "@/views/throughputreport/throughputClient";
+import { Endpoint, EndpointSize, type Queue } from "@/views/throughputreport/licenseDetails/types";
+
+//TODO: get from the metadata file
+const endpointSizes = [
+  new EndpointSize("4", 0, 4),
+  new EndpointSize("16", 4, 16),
+  new EndpointSize("64", 16, 64),
+  new EndpointSize("256", 64, 256),
+  new EndpointSize("1024", 256, 1_024),
+  new EndpointSize("4K", 1_024, 4_096),
+  new EndpointSize("16K", 4_096, 16_384),
+  new EndpointSize("64K", 16_384, 65_536),
+  new EndpointSize("256K", 65_536, 262_144),
+  new EndpointSize("1024K", 262_144, 1_048_576),
+  new EndpointSize("4M", 1_048_576, 4_194_304),
+  new EndpointSize("16M", 4_194_304, 16_777_216),
+  new EndpointSize("64M", 16_777_216, 67_108_864),
+  new EndpointSize("256M", 67_108_864, 268_435_456),
+  new EndpointSize("1024M", 268_435_456, 1_073_741_824),
+  new EndpointSize("U", 1_073_741_824, null),
+];
+
+export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
+  const endpoints = ref<Endpoint[]>([]);
+  const infrastructureQueues = ref<Queue[]>([]);
+  const excludedQueues = ref<Queue[]>([]);
+
+  async function refresh() {
+    const sample: any = await import("@/views/throughputreport/licenseDetails/sample.json");
+    const throughputClient = createThroughputClient();
+    const scQueues = await throughputClient.queues();
+
+    const toQueue = (metaQ: any) =>
+      ({
+        nameHash: metaQ.nameHash,
+        scope: metaQ.scope,
+        details: scQueues.find((scQ) => scQ.name_hash === metaQ.nameHash),
+      }) as Queue;
+
+    endpoints.value = sample.endpoints.map((metaEp: any) => new Endpoint(crypto.randomUUID(), metaEp.name, metaEp.queues.map(toQueue), metaEp.classification, endpointSizes.find((es) => es.name === metaEp.endpointSize)!, endpointSizes));
+    infrastructureQueues.value = sample.infrastructureQueues.map(toQueue);
+    excludedQueues.value = sample.excludedQueues.map(toQueue);
+  }
+  refresh();
+
+  return {
+    endpoints,
+    endpointSizes,
+    infrastructureQueues,
+    excludedQueues,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useLicenseDetailsStore, import.meta.hot));
+}
+
+export type LicenseDetailsStore = ReturnType<typeof useLicenseDetailsStore>;
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
index 886b28d432..66bbccff40 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
@@ -1,3 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { storeToRefs } from "pinia";
+import QueueData from "./QueueData.vue";
+import NoData from "@/components/NoData.vue";
 
-<template>Hello</template>
+const licenseDetailsStore = useLicenseDetailsStore();
+const { excludedQueues } = storeToRefs(licenseDetailsStore);
+</script>
+
+<template>
+  <QueueData v-if="excludedQueues.length" :queues="excludedQueues" />
+  <NoData v-else message="There are currently no excluded queues associated with your license"></NoData>
+</template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue
index e519b4170f..b67adcce4a 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue
@@ -1,3 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { storeToRefs } from "pinia";
+import QueueData from "./QueueData.vue";
+import NoData from "@/components/NoData.vue";
 
-<template></template>
+const licenseDetailsStore = useLicenseDetailsStore();
+const { infrastructureQueues } = storeToRefs(licenseDetailsStore);
+</script>
+
+<template>
+  <QueueData v-if="infrastructureQueues.length" :queues="infrastructureQueues" />
+  <NoData v-else message="There are currently no infrastructure queues associated with your license"></NoData>
+</template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
index 770afa53df..a7d936c79b 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -1,59 +1,16 @@
 <script setup lang="ts">
 import DataView from "@/components/DataView.vue";
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import CollapsedEndpoint from "./CollapsedEndpoint.vue";
-import { Endpoint, EndpointSize, type Queue } from "./types.ts";
 import EndpointHeader from "./EndpointHeader.vue";
 import EndpointDetails from "./EndpointDetails.vue";
-import createThroughputClient from "@/views/throughputreport/throughputClient";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore.ts";
+import { storeToRefs } from "pinia";
 
-const endpoints = ref<Endpoint[]>([]);
-const collapsedEndpoints = ref(new Map());
-
-//TODO: get from the metadata file
-const endpointSizes = [
-  new EndpointSize("4", 0, 4),
-  new EndpointSize("16", 4, 16),
-  new EndpointSize("64", 16, 64),
-  new EndpointSize("256", 64, 256),
-  new EndpointSize("1024", 256, 1_024),
-  new EndpointSize("4K", 1_024, 4_096),
-  new EndpointSize("16K", 4_096, 16_384),
-  new EndpointSize("64K", 16_384, 65_536),
-  new EndpointSize("256K", 65_536, 262_144),
-  new EndpointSize("1024K", 262_144, 1_048_576),
-  new EndpointSize("4M", 1_048_576, 4_194_304),
-  new EndpointSize("16M", 4_194_304, 16_777_216),
-  new EndpointSize("64M", 16_777_216, 67_108_864),
-  new EndpointSize("256M", 67_108_864, 268_435_456),
-  new EndpointSize("1024M", 268_435_456, 1_073_741_824),
-  new EndpointSize("U", 1_073_741_824, null),
-];
+const licenseDetailsStore = useLicenseDetailsStore();
+const { endpoints } = storeToRefs(licenseDetailsStore);
 
-onMounted(async () => {
-  const sample: any = await import("./sample.json");
-  const throughputClient = createThroughputClient();
-  const scQueues = await throughputClient.queues();
-
-  endpoints.value = sample.endpoints.map(
-    (metaEp: any) =>
-      new Endpoint(
-        crypto.randomUUID(),
-        metaEp.name,
-        metaEp.queues.map(
-          (metaQ: any) =>
-            ({
-              nameHash: metaQ.nameHash,
-              scope: metaQ.scope,
-              details: scQueues.find((scQ) => scQ.name_hash === metaQ.nameHash),
-            }) as Queue
-        ),
-        metaEp.classification,
-        endpointSizes.find((es) => es.name === metaEp.endpointSize)!,
-        endpointSizes
-      )
-  );
-});
+const collapsedEndpoints = ref(new Map());
 </script>
 
 <template>

From 8576f68158e1d704e80e9af222e1138a47f3108b Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 13 Jul 2026 13:20:46 +0800
Subject: [PATCH 08/30] - rename monthly throughput - implement collapse/expand
 all

---
 src/Frontend/src/components/DataView.vue      |  3 ++-
 .../licenseDetails/CollapsedEndpoint.vue      |  4 ++--
 .../licenseDetails/EndpointDetails.vue        |  2 +-
 .../licenseDetails/LicensedEndpointsView.vue  | 19 ++++++++++++-------
 .../throughputreport/licenseDetails/types.ts  |  4 ++--
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/Frontend/src/components/DataView.vue b/src/Frontend/src/components/DataView.vue
index ce3ff9a77b..465e8551fa 100644
--- a/src/Frontend/src/components/DataView.vue
+++ b/src/Frontend/src/components/DataView.vue
@@ -18,9 +18,10 @@ const pageNumber = ref(1);
 const itemsPerPage = ref(props.itemsPerPage);
 const pageData = computed(() => props.data.slice((pageNumber.value - 1) * itemsPerPage.value, Math.min(pageNumber.value * itemsPerPage.value, props.data.length)));
 
-const emit = defineEmits<{ itemsPerPageChanged: [value: number] }>();
+const emit = defineEmits<{ itemsPerPageChanged: [value: number]; pageChanged: [] }>();
 
 watch(itemsPerPage, () => emit("itemsPerPageChanged", itemsPerPage.value));
+watch(pageNumber, () => emit("pageChanged"));
 </script>
 
 <template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
index ddddcb0f90..33eb43e0fa 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
@@ -25,10 +25,10 @@ const endpointClassificationStyle = computed(() => {
     </div>
     <div class="details">
       <span>Queues: {{ endpoint.queues.length }}</span>
-      <span> Size: {{ endpoint.endpointSize }} </span>
+      <span> Size: {{ endpoint.endpointSize.name }} </span>
       <span>
         Throughput:
-        <!-- {{ `${NumberFormat.format(displayEndpointSizeModel ? endpoint.averageMonthlyThroughput : endpoint.estimatedDailyThroughput)}/${displayEndpointSizeModel ? "month" : "day"}` }} -->
+        {{ endpoint.totalMonthlyThroughput.toLocaleString() }}
       </span>
     </div>
     <!-- <div>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
index 9f20dd1a10..5b51666dd0 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
@@ -30,7 +30,7 @@ const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q
         <label>Licensed Size</label><span>{{ endpoint.endpointSize.name }}</span>
       </div>
       <div class="details-item">
-        <label>Total Throughput</label><span>{{ endpoint.totalThroughput.toLocaleString() }}</span>
+        <label>Total Throughput</label><span>{{ endpoint.totalMonthlyThroughput.toLocaleString() }}</span>
       </div>
       <div class="details-item" :title="endpoint.currentSize.throughputText">
         <label>Current Size</label><span>{{ endpoint.currentSize.name }}</span>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
index a7d936c79b..94e73e63fc 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DataView from "@/components/DataView.vue";
-import { ref } from "vue";
+import { computed, reactive } from "vue";
 import CollapsedEndpoint from "./CollapsedEndpoint.vue";
 import EndpointHeader from "./EndpointHeader.vue";
 import EndpointDetails from "./EndpointDetails.vue";
@@ -10,15 +10,21 @@ import { storeToRefs } from "pinia";
 const licenseDetailsStore = useLicenseDetailsStore();
 const { endpoints } = storeToRefs(licenseDetailsStore);
 
-const collapsedEndpoints = ref(new Map());
+const collapsedEndpoints = reactive(new Map());
+const collapsedLength = computed(() => [...collapsedEndpoints.values()].filter((value) => value).length);
 </script>
 
 <template>
   <div class="mt-2">
-    <DataView :data="endpoints" :items-per-page="5">
+    <DataView :data="endpoints" :items-per-page="5" @page-changed="collapsedEndpoints.clear()">
       <template #data="{ pageData, pageNumber }">
         <!--parent div with key ensures that any state for the details below is reset on page change-->
         <div :key="pageNumber">
+          <div class="actions mb-2">
+            <div class="backdrop"></div>
+            <button type="button" class="btn btn-default" :disabled="collapsedLength === 0" @click="pageData.forEach((endpoint) => collapsedEndpoints.set(endpoint, false))">Expand All</button>
+            <button type="button" class="btn btn-default" :disabled="collapsedLength === pageData.length" @click="pageData.forEach((endpoint) => collapsedEndpoints.set(endpoint, true))">Collapse All</button>
+          </div>
           <div class="card mb-3" v-for="endpoint in pageData">
             <CollapsedEndpoint class="card-header" v-if="collapsedEndpoints.get(endpoint)" :endpoint="endpoint" @expand="collapsedEndpoints.set(endpoint, false)" />
             <template v-else>
@@ -50,11 +56,10 @@ const collapsedEndpoints = ref(new Map());
 
 .actions {
   display: flex;
-  gap: 0.25rem;
-  justify-content: space-between;
-  align-items: end;
+  gap: 5px;
   position: sticky;
-  top: 0;
+  /* the main container-fluid has 40px of top padding */
+  top: -40px;
   z-index: 10;
 }
 
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/types.ts b/src/Frontend/src/views/throughputreport/licenseDetails/types.ts
index 2b9f657ebe..394783d3ab 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/types.ts
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/types.ts
@@ -28,12 +28,12 @@ export class Endpoint {
     this.availableSizes = availableSizes;
   }
 
-  get totalThroughput() {
+  get totalMonthlyThroughput() {
     return this.queues.map((queue) => queue.details?.max_monthly_throughput ?? 0).reduce((total, value) => total + value, 0);
   }
 
   get currentSize() {
-    return this.availableSizes.find((size) => size.throughputMin <= this.totalThroughput && (size.throughputMax ?? Number.MAX_VALUE) > this.totalThroughput)!;
+    return this.availableSizes.find((size) => size.throughputMin <= this.totalMonthlyThroughput && (size.throughputMax ?? Number.MAX_VALUE) > this.totalMonthlyThroughput)!;
   }
 }
 

From f4b9fcb8860a2c987683ffb8e1d27a342b54d08d Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 13 Jul 2026 14:27:18 +0800
Subject: [PATCH 09/30] adjust layout to flex

---
 .../licenseDetails/EndpointDetails.vue              | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
index 5b51666dd0..3ac0111bc8 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
@@ -45,27 +45,26 @@ const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q
 
 <style scoped>
 .card-body {
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   gap: 2px;
-  grid-template-areas:
-    "details graph"
-    "queue-data queue-data";
 }
 
 .details {
-  grid-area: details;
   display: flex;
+  flex: 1;
+  margin-bottom: 1rem;
 }
 
 .graph {
-  grid-area: graph;
   height: 7rem;
   margin-bottom: 1rem;
   justify-self: flex-end;
 }
 
 .queue-data {
-  grid-area: queue-data;
+  flex-basis: 100%;
 }
 
 .details-item {

From 18c4f3c3033a6ca1badacd9457d9f2b6c11d7abd Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 14 Jul 2026 11:10:32 +0800
Subject: [PATCH 10/30] rearrange layout

---
 .../views/throughputreport/EndpointsView.vue  | 39 +++++++++----------
 .../licenseDetails/ExcludedQueuesView.vue     |  4 +-
 .../licenseDetails/QueueData.vue              |  4 ++
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index bf35c6804b..f5273bb7f3 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -36,8 +36,23 @@ function toggleOptionsLegendVisible() {
 </script>
 
 <template>
-  <div class="box">
-    <div class="row">
+  <div class="row">
+    <div class="col-sm-12">
+      <div class="nav tabs">
+        <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedEndpoints.link) }">
+          <RouterLink :to="routeLinks.throughput.queues.detectedEndpoints.link">Detected Endpoint Queues</RouterLink>
+        </h5>
+        <h5 v-if="isBrokerTransport" class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedBrokerQueues.link) }">
+          <RouterLink :to="routeLinks.throughput.queues.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
+        </h5>
+        <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
+          <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">License Details</RouterLink>
+        </h5>
+      </div>
+    </div>
+  </div>
+  <div class="box" v-if="isRouteSelected(routeLinks.throughput.queues.root)">
+    <div class="row mt-2">
       <p>
         Set an Endpoint Type for all detected endpoint and broker queues with the most appropriate option.<br />
         Use the filters to bulk set the Endpoint Types on similar named endpoints/queues.<br />
@@ -53,25 +68,9 @@ function toggleOptionsLegendVisible() {
         </p>
       </div>
     </div>
-    <div class="row">
-      <div class="col-sm-12">
-        <div class="nav tabs">
-          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedEndpoints.link) }">
-            <RouterLink :to="routeLinks.throughput.queues.detectedEndpoints.link">Detected Endpoint Queues</RouterLink>
-          </h5>
-          <h5 v-if="isBrokerTransport" class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedBrokerQueues.link) }">
-            <RouterLink :to="routeLinks.throughput.queues.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
-          </h5>
-          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
-            <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">License Details</RouterLink>
-          </h5>
-        </div>
-      </div>
-    </div>
-    <div class="intro">
-      <RouterView />
-    </div>
+    <RouterView />
   </div>
+  <RouterView v-else />
 </template>
 
 <style scoped></style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
index 66bbccff40..16df26f2c5 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
@@ -9,6 +9,8 @@ const { excludedQueues } = storeToRefs(licenseDetailsStore);
 </script>
 
 <template>
-  <QueueData v-if="excludedQueues.length" :queues="excludedQueues" />
+  <div class="mt-2" v-if="excludedQueues.length">
+    <QueueData :queues="excludedQueues" />
+  </div>
   <NoData v-else message="There are currently no excluded queues associated with your license"></NoData>
 </template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
index e3891fca2e..67f51312cd 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
@@ -49,6 +49,10 @@ const props = defineProps<{
   width: 100%;
 }
 
+.table thead tr th {
+  background-color: transparent;
+}
+
 td:not(.queue-name),
 th:not(.queue-name) {
   width: 0;

From 98d6e7f28e1fab113941c5f0e6464b855d3606de Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 14 Jul 2026 11:11:08 +0800
Subject: [PATCH 11/30] include licensed size comparisons

---
 .../src/components/ExclamationMark.vue        |   2 +-
 .../licenseDetails/EndpointDetails.vue        |   4 +-
 .../licenseDetails/LicenseDetails.vue         | 103 +++++++++++++++---
 3 files changed, 91 insertions(+), 18 deletions(-)

diff --git a/src/Frontend/src/components/ExclamationMark.vue b/src/Frontend/src/components/ExclamationMark.vue
index 504e51b314..707fb4934e 100644
--- a/src/Frontend/src/components/ExclamationMark.vue
+++ b/src/Frontend/src/components/ExclamationMark.vue
@@ -29,6 +29,6 @@ const props = withDefaults(
 }
 
 .warning {
-  color: var(--reduced-emphasis);
+  color: #f3bc52 !important;
 }
 </style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
index 3ac0111bc8..8302d030f4 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
@@ -12,10 +12,10 @@ const throughputByMonth = computed(() =>
     ...props.endpoint.queues
       .flatMap((queue) => queue.details?.monthly_throughput ?? [])
       .reduce((result, { month, throughput }) => {
-        const existing = (result as any).getOrInsert(month, 0);
+        const existing = result.get(month) ?? 0;
         result.set(month, existing + throughput);
         return result;
-      }, new Map()),
+      }, new Map<string, number>()),
   ]
     .toSorted(([x1], [x2]) => x1.localeCompare(x2))
     .map(([month, throughput]) => ({ month, throughput }) as MonthlyThroughput)
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
index 76115e25dc..8a10c7f8c6 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
@@ -1,27 +1,100 @@
 <script setup lang="ts">
 import routeLinks from "@/router/routeLinks";
 import isRouteSelected from "@/composables/isRouteSelected";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import DataView from "@/components/DataView.vue";
+import ColumnHeader from "@/components/ColumnHeader.vue";
+import ExclamationMark from "@/components/ExclamationMark.vue";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { WarningLevel } from "@/components/WarningLevel";
+
+const licenseDetailsStore = useLicenseDetailsStore();
+const { endpoints } = storeToRefs(licenseDetailsStore);
+const { endpointSizes } = licenseDetailsStore;
+
+const sizes = computed(() =>
+  endpoints.value.reduce(
+    (result, endpoint) => {
+      const { licensed, current } = result;
+      const licensedCount = licensed.get(endpoint.endpointSize.name) ?? 0;
+      const currentCount = current.get(endpoint.currentSize.name) ?? 0;
+      licensed.set(endpoint.endpointSize.name, licensedCount + 1);
+      current.set(endpoint.currentSize.name, currentCount + 1);
+      return { licensed, current };
+    },
+    { licensed: new Map<string, number>(), current: new Map<string, number>() }
+  )
+);
+const licensedCounts = computed(() => sizes.value.licensed);
+const currentCounts = computed(() => sizes.value.current);
+const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...currentCounts.value.keys()])].sort((a, b) => endpointSizes.findIndex((size) => size.name === a) - endpointSizes.findIndex((size) => size.name === b)));
 </script>
 
 <template>
-  <div class="row mt-2">
-    <div class="col-sm-12">
-      <div class="nav tabs">
-        <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.licensedEndpoints.link) }">
-          <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">Licensed Endpoints</RouterLink>
-        </h5>
-        <h5 class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.infrastructureQueues.link) }">
-          <RouterLink :to="routeLinks.throughput.licenseDetails.infrastructureQueues.link">Infrastructure Queues</RouterLink>
-        </h5>
-        <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.excludedQueues.link) }">
-          <RouterLink :to="routeLinks.throughput.licenseDetails.excludedQueues.link">Excluded Queues</RouterLink>
-        </h5>
+  <div class="box">
+    <h3>Licensed Endpoints</h3>
+    <div class="licensed-endpoints col-4">
+      <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
+        <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-8" />
+        <ColumnHeader name="Licensed" label="Licensed" class="col-2" />
+        <ColumnHeader name="Used" label="Used" class="col-2" />
+      </div>
+      <DataView :data="allSizes">
+        <template #data="{ pageData }">
+          <div role="rowgroup" aria-label="endpoints">
+            <div role="row" class="row grid-row" v-for="size in pageData" :key="size">
+              <span class="col-8">
+                {{ size }}
+              </span>
+              <span class="col-2">
+                {{ (licensedCounts.get(size) ?? 0).toLocaleString() }}
+              </span>
+              <span class="col-2 current-size">
+                {{ (currentCounts.get(size) ?? 0).toLocaleString() }}
+                <ExclamationMark v-if="(licensedCounts.get(size) ?? 0) !== (currentCounts.get(size) ?? 0)" :icon="faWarning" :type="WarningLevel.Warning" />
+              </span>
+            </div>
+          </div>
+        </template>
+      </DataView>
+    </div>
+    <div class="row mt-3">
+      <div class="col-sm-12">
+        <div class="nav tabs">
+          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.licensedEndpoints.link) }">
+            <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">Licensed Endpoints</RouterLink>
+          </h5>
+          <h5 class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.infrastructureQueues.link) }">
+            <RouterLink :to="routeLinks.throughput.licenseDetails.infrastructureQueues.link">Infrastructure Queues</RouterLink>
+          </h5>
+          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.excludedQueues.link) }">
+            <RouterLink :to="routeLinks.throughput.licenseDetails.excludedQueues.link">Excluded Queues</RouterLink>
+          </h5>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="intro">
     <RouterView />
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.table-head-row {
+  font-weight: bold;
+}
+
+.licensed-endpoints .grid-row {
+  border-top: 1px solid #eee;
+  border-right: 1px solid #fff;
+  border-bottom: 1px solid #eee;
+  border-left: 1px solid #fff;
+  background-color: #fff;
+}
+
+.current-size {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

From 291e52a232a9378f72a37983a23100588c7610d0 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 14 Jul 2026 12:53:10 +0800
Subject: [PATCH 12/30] extra collapsed header details

---
 .../licenseDetails/CollapsedEndpoint.vue      | 29 +++++++++++++------
 .../licenseDetails/EndpointDetails.vue        | 17 ++++++-----
 .../licenseDetails/EndpointHeader.vue         |  9 ++----
 .../licenseDetails/LicenseDetails.vue         |  4 +--
 .../licenseDetails/LicensedEndpointsView.vue  |  1 +
 .../throughputreport/licenseDetails/types.ts  |  4 +++
 6 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
index 33eb43e0fa..0c504faf98 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
@@ -10,7 +10,7 @@ const emit = defineEmits(["expand"]);
 const endpointClassificationStyle = computed(() => {
   switch (props.endpoint.classification) {
     case EndpointClassification.Full:
-      return "--full";
+      return props.endpoint.isInBreach ? "--breach" : "--full";
     case EndpointClassification.SendOnly:
       return "--send-only";
   }
@@ -24,12 +24,10 @@ const endpointClassificationStyle = computed(() => {
       <strong :title="endpoint.name">{{ endpoint.name }}</strong>
     </div>
     <div class="details">
-      <span>Queues: {{ endpoint.queues.length }}</span>
-      <span> Size: {{ endpoint.endpointSize.name }} </span>
-      <span>
-        Throughput:
-        {{ endpoint.totalMonthlyThroughput.toLocaleString() }}
-      </span>
+      <span class="queues">Queues: {{ endpoint.queues.length }}</span>
+      <span class="l-size">Licensed Size: {{ endpoint.endpointSize.name }} </span>
+      <span class="throughput">Throughput: {{ endpoint.totalMonthlyThroughput.toLocaleString() }}</span>
+      <span class="c-size">Current Size: {{ endpoint.currentSize.name }}</span>
     </div>
     <!-- <div>
       <RemoveEndpoint :endpoint="endpoint" />
@@ -71,8 +69,21 @@ const endpointClassificationStyle = computed(() => {
 
 .endpoint-header .details {
   font-size: 0.9em;
-  gap: 2em;
-  flex-basis: 35em;
+  gap: 1em;
+  flex-basis: 60em;
+}
+
+.endpoint-header .details .queues {
+  width: 7em;
+}
+
+.endpoint-header .details .l-size,
+.endpoint-header .details .c-size {
+  width: 10em;
+}
+
+.endpoint-header .details .throughput {
+  width: 12em;
 }
 
 .endpoint-header .endpoint-name {
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
index 8302d030f4..329e0968ea 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Endpoint } from "./types.ts";
+import { EndpointClassification, type Endpoint } from "./types.ts";
 import QueueData from "./QueueData.vue";
 import { computed } from "vue";
 import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary.ts";
@@ -26,14 +26,15 @@ const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q
 <template>
   <div class="card-body" :key="endpoint.clientId">
     <div class="details">
-      <div class="details-item" :title="endpoint.endpointSize.throughputText">
-        <label>Licensed Size</label><span>{{ endpoint.endpointSize.name }}</span>
+      <div class="details-item">
+        <label>Licensed Size</label
+        ><span :title="endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.throughputText : undefined">{{ endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.name : "Send Only" }}</span>
       </div>
       <div class="details-item">
-        <label>Total Throughput</label><span>{{ endpoint.totalMonthlyThroughput.toLocaleString() }}</span>
+        <label>Average Throughput/Month</label><span>{{ endpoint.totalMonthlyThroughput.toLocaleString() }}</span>
       </div>
-      <div class="details-item" :title="endpoint.currentSize.throughputText">
-        <label>Current Size</label><span>{{ endpoint.currentSize.name }}</span>
+      <div class="details-item" v-if="endpoint.classification === EndpointClassification.Full">
+        <label>Current Size</label><span :title="endpoint.currentSize.throughputText">{{ endpoint.currentSize.name }}</span>
       </div>
     </div>
     <ThroughputGraph :data="throughputByMonth" class="graph" v-if="throughputByMonth.length" />
@@ -53,13 +54,13 @@ const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q
 
 .details {
   display: flex;
+  flex-direction: column;
   flex: 1;
-  margin-bottom: 1rem;
+  max-width: 25em;
 }
 
 .graph {
   height: 7rem;
-  margin-bottom: 1rem;
   justify-self: flex-end;
 }
 
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
index b605aef144..3cbf9ce5aa 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
@@ -10,7 +10,7 @@ const emit = defineEmits(["collapse"]);
 const endpointClassificationStyle = computed(() => {
   switch (props.endpoint.classification) {
     case EndpointClassification.Full:
-      return "--full";
+      return props.endpoint.isInBreach ? "--breach" : "--full";
     case EndpointClassification.SendOnly:
       return "--send-only";
   }
@@ -37,12 +37,6 @@ watch(
       <FAIcon :icon="faCircleChevronUp" class="collapse-button" size="lg" tabindex="0" title="collapse" @click="emit('collapse')" />
       <strong :title="endpoint.name">{{ endpoint.name }}</strong>
     </div>
-    <div>
-      <label>Classification:</label>
-      <select v-model="endpoint.classification" class="form-select" disabled>
-        <option v-for="[name, classification] in Object.entries(EndpointClassification).filter(([, classification]) => !isNaN(Number(classification)))" :value="classification">{{ name }}</option>
-      </select>
-    </div>
     <div class="header-buttons d-print-none">
       <!-- <ModalButton
         class="btn btn-secondary"
@@ -73,6 +67,7 @@ watch(
   background-color: hsl(from var(--endpoint-header-bg) h s 90%);
 }
 
+/* not currently used */
 .dark-mode .endpoint-header {
   background-color: var(--endpoint-header-bg);
 }
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
index 8a10c7f8c6..7854407664 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
@@ -35,7 +35,7 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
 <template>
   <div class="box">
     <h3>Licensed Endpoints</h3>
-    <div class="licensed-endpoints col-4">
+    <div class="licensed-endpoints col-6">
       <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
         <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-8" />
         <ColumnHeader name="Licensed" label="Licensed" class="col-2" />
@@ -45,7 +45,7 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
         <template #data="{ pageData }">
           <div role="rowgroup" aria-label="endpoints">
             <div role="row" class="row grid-row" v-for="size in pageData" :key="size">
-              <span class="col-8">
+              <span class="col-8" :title="endpointSizes.find((eps) => eps.name === size)?.throughputText">
                 {{ size }}
               </span>
               <span class="col-2">
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
index 94e73e63fc..c076894e6b 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -42,6 +42,7 @@ const collapsedLength = computed(() => [...collapsedEndpoints.values()].filter((
 .card {
   --full: hsl(196deg 100% 31%);
   --send-only: hsl(159deg 100% 31%);
+  --breach: hsl(40deg 80% 64%);
   --shadow-color: 215deg 50% 30%;
   box-shadow:
     0px 0.1px 0.4px hsl(var(--shadow-color) / 0.34),
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/types.ts b/src/Frontend/src/views/throughputreport/licenseDetails/types.ts
index 394783d3ab..dbfddd61b2 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/types.ts
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/types.ts
@@ -35,6 +35,10 @@ export class Endpoint {
   get currentSize() {
     return this.availableSizes.find((size) => size.throughputMin <= this.totalMonthlyThroughput && (size.throughputMax ?? Number.MAX_VALUE) > this.totalMonthlyThroughput)!;
   }
+
+  get isInBreach() {
+    return this.endpointSize !== this.currentSize;
+  }
 }
 
 export class EndpointSize {

From 9e16d6711bec69ab2c0cfd54e81fe80cd3c8f932 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 14 Jul 2026 13:43:35 +0800
Subject: [PATCH 13/30] default to collapsed

---
 .../licenseDetails/LicensedEndpointsView.vue    | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
index c076894e6b..3dd0f18464 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -6,31 +6,32 @@ import EndpointHeader from "./EndpointHeader.vue";
 import EndpointDetails from "./EndpointDetails.vue";
 import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore.ts";
 import { storeToRefs } from "pinia";
+import type { Endpoint } from "./types.ts";
 
 const licenseDetailsStore = useLicenseDetailsStore();
 const { endpoints } = storeToRefs(licenseDetailsStore);
 
-const collapsedEndpoints = reactive(new Map());
-const collapsedLength = computed(() => [...collapsedEndpoints.values()].filter((value) => value).length);
+const expandedEndpoints = reactive(new Map());
+const expandedLength = computed(() => [...expandedEndpoints.values()].filter((value) => value).length);
 </script>
 
 <template>
   <div class="mt-2">
-    <DataView :data="endpoints" :items-per-page="5" @page-changed="collapsedEndpoints.clear()">
+    <DataView :data="endpoints" :items-per-page="5" @page-changed="expandedEndpoints.clear()">
       <template #data="{ pageData, pageNumber }">
         <!--parent div with key ensures that any state for the details below is reset on page change-->
         <div :key="pageNumber">
           <div class="actions mb-2">
             <div class="backdrop"></div>
-            <button type="button" class="btn btn-default" :disabled="collapsedLength === 0" @click="pageData.forEach((endpoint) => collapsedEndpoints.set(endpoint, false))">Expand All</button>
-            <button type="button" class="btn btn-default" :disabled="collapsedLength === pageData.length" @click="pageData.forEach((endpoint) => collapsedEndpoints.set(endpoint, true))">Collapse All</button>
+            <button type="button" class="btn btn-default" :disabled="expandedLength === pageData.length" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, true))">Expand All</button>
+            <button type="button" class="btn btn-default" :disabled="expandedLength === 0" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, false))">Collapse All</button>
           </div>
           <div class="card mb-3" v-for="endpoint in pageData">
-            <CollapsedEndpoint class="card-header" v-if="collapsedEndpoints.get(endpoint)" :endpoint="endpoint" @expand="collapsedEndpoints.set(endpoint, false)" />
-            <template v-else>
-              <EndpointHeader :endpoint="endpoint" class="card-header" @collapse="collapsedEndpoints.set(endpoint, true)" />
+            <template v-if="expandedEndpoints.get(endpoint)">
+              <EndpointHeader :endpoint="endpoint" class="card-header" @collapse="expandedEndpoints.set(endpoint, false)" />
               <EndpointDetails :endpoint="endpoint" />
             </template>
+            <CollapsedEndpoint class="card-header" v-else :endpoint="endpoint" @expand="expandedEndpoints.set(endpoint, true)" />
           </div>
         </div>
       </template>

From f9544eb3001356d2d22a20fe0074cd671dde6e7d Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 14 Jul 2026 15:03:40 +0800
Subject: [PATCH 14/30] make main endpoint paging sticky so that it's visible
 when all endpoints are expanded

---
 src/Frontend/src/assets/pagination.css        |  2 +-
 src/Frontend/src/components/DataView.vue      | 23 ++++++++++++++++++-
 .../src/components/PaginationStrip.vue        | 11 ++++++++-
 .../licenseDetails/LicensedEndpointsView.vue  | 20 ++++++++--------
 4 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/Frontend/src/assets/pagination.css b/src/Frontend/src/assets/pagination.css
index 9c289e5892..39b3d67c78 100644
--- a/src/Frontend/src/assets/pagination.css
+++ b/src/Frontend/src/assets/pagination.css
@@ -17,7 +17,7 @@
 }
 
 .pagination {
-  margin: 1.5em;
+  margin: 1.5rem;
 }
 
 .pagination > li > button:hover,
diff --git a/src/Frontend/src/components/DataView.vue b/src/Frontend/src/components/DataView.vue
index 465e8551fa..82e5787e54 100644
--- a/src/Frontend/src/components/DataView.vue
+++ b/src/Frontend/src/components/DataView.vue
@@ -9,6 +9,7 @@ const props = withDefaults(
     itemsPerPageOptions?: number[];
     itemsPerPage?: number;
     showPagination?: boolean;
+    stickyPagination?: boolean;
     showItemsPerPage?: boolean;
   }>(),
   { itemsPerPageOptions: () => [20, 35, 50, 75], itemsPerPage: 50, showPagination: true, showItemsPerPage: false }
@@ -26,8 +27,28 @@ watch(pageNumber, () => emit("pageChanged"));
 
 <template>
   <slot name="data" :pageData="pageData" :pageNumber="pageNumber" />
-  <div class="row">
+  <div class="row" :class="{ 'sticky-pagination': stickyPagination }">
     <ItemsPerPage v-if="showItemsPerPage" v-model="itemsPerPage" :options="itemsPerPageOptions" />
     <PaginationStrip v-if="showPagination" v-model="pageNumber" :totalCount="data.length" :itemsPerPage="itemsPerPage" />
   </div>
 </template>
+
+<style scoped>
+.sticky-pagination {
+  position: sticky;
+  bottom: 0;
+  margin-bottom: 0;
+}
+
+.sticky-pagination {
+  --shadow-color: hsl(215deg 50% 30%);
+  filter: drop-shadow(2px 4px 8px hsl(from var(--shadow-color) h s l / 0.4));
+}
+</style>
+
+<style>
+/* use smaller margins for sticky version, since we want it close to the bottom of the screen when scrolling */
+.sticky-pagination .pagination {
+  margin: 0 1.5rem;
+}
+</style>
diff --git a/src/Frontend/src/components/PaginationStrip.vue b/src/Frontend/src/components/PaginationStrip.vue
index 3f11a59f0f..90d750cf54 100644
--- a/src/Frontend/src/components/PaginationStrip.vue
+++ b/src/Frontend/src/components/PaginationStrip.vue
@@ -118,7 +118,7 @@ const pages = computed(() => {
 </script>
 
 <template>
-  <div v-if="showPagination" class="col align-self-center">
+  <div v-if="showPagination" class="pagination-controls col align-self-center">
     <ul aria-label="pagination" class="pagination justify-content-center">
       <li v-for="page of pages" class="page-item" :key="page.key">
         <button :aria-pressed="page.class?.active" :disabled="page.class?.disabled" :aria-label="page.key" class="page-link" @click="pageNumber = page.page" :class="page.class">{{ page.label }}</button>
@@ -136,4 +136,13 @@ const pages = computed(() => {
   cursor: not-allowed;
   pointer-events: all !important;
 }
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+}
+
+.pagination-controls .page-link.active {
+  z-index: 0; /* pagination.scss has this set higher, for no obvious reason, which messes up with sticky-pagination over the top of other pagination */
+}
 </style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
index 3dd0f18464..44d4e90d51 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -17,7 +17,7 @@ const expandedLength = computed(() => [...expandedEndpoints.values()].filter((va
 
 <template>
   <div class="mt-2">
-    <DataView :data="endpoints" :items-per-page="5" @page-changed="expandedEndpoints.clear()">
+    <DataView :data="endpoints" :items-per-page="5" @page-changed="expandedEndpoints.clear()" sticky-pagination>
       <template #data="{ pageData, pageNumber }">
         <!--parent div with key ensures that any state for the details below is reset on page change-->
         <div :key="pageNumber">
@@ -44,16 +44,16 @@ const expandedLength = computed(() => [...expandedEndpoints.values()].filter((va
   --full: hsl(196deg 100% 31%);
   --send-only: hsl(159deg 100% 31%);
   --breach: hsl(40deg 80% 64%);
-  --shadow-color: 215deg 50% 30%;
+  --shadow-color: hsl(215deg 50% 30%);
   box-shadow:
-    0px 0.1px 0.4px hsl(var(--shadow-color) / 0.34),
-    0px 0.1px 0.4px 0.7px hsl(var(--shadow-color) / 0.3),
-    0px 0.4px 1.2px 1.4px hsl(var(--shadow-color) / 0.25),
-    0px 1px 3px 2.1px hsl(var(--shadow-color) / 0.21),
-    0px 2.3px 7px 2.9px hsl(var(--shadow-color) / 0.17),
-    0px 4.3px 13.2px 3.6px hsl(var(--shadow-color) / 0.13),
-    0px 7.3px 22.4px 4.3px hsl(var(--shadow-color) / 0.09),
-    0px 11.6px 35.6px 5px hsl(var(--shadow-color) / 0.04);
+    0px 0.1px 0.4px hsl(from var(--shadow-color) h s l / 0.34),
+    0px 0.1px 0.4px 0.7px hsl(from var(--shadow-color) h s l / 0.3),
+    0px 0.4px 1.2px 1.4px hsl(from var(--shadow-color) h s l / 0.25),
+    0px 1px 3px 2.1px hsl(from var(--shadow-color) h s l / 0.21),
+    0px 2.3px 7px 2.9px hsl(from var(--shadow-color) h s l / 0.17),
+    0px 4.3px 13.2px 3.6px hsl(from var(--shadow-color) h s l / 0.13),
+    0px 7.3px 22.4px 4.3px hsl(from var(--shadow-color) h s l / 0.09),
+    0px 11.6px 35.6px 5px hsl(from var(--shadow-color) h s l / 0.04);
 }
 
 .actions {

From 85aa1e010784ff8f10e5ad367f1ef13679dcad61 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 14 Jul 2026 15:28:09 +0800
Subject: [PATCH 15/30] change detail order for better association

---
 .../licenseDetails/CollapsedEndpoint.vue           |  2 +-
 .../licenseDetails/EndpointDetails.vue             | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
index 0c504faf98..f7f41dea19 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
@@ -25,9 +25,9 @@ const endpointClassificationStyle = computed(() => {
     </div>
     <div class="details">
       <span class="queues">Queues: {{ endpoint.queues.length }}</span>
-      <span class="l-size">Licensed Size: {{ endpoint.endpointSize.name }} </span>
       <span class="throughput">Throughput: {{ endpoint.totalMonthlyThroughput.toLocaleString() }}</span>
       <span class="c-size">Current Size: {{ endpoint.currentSize.name }}</span>
+      <span class="l-size">Licensed Size: {{ endpoint.endpointSize.name }} </span>
     </div>
     <!-- <div>
       <RemoveEndpoint :endpoint="endpoint" />
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
index 329e0968ea..94f77369a0 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
@@ -27,14 +27,16 @@ const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q
   <div class="card-body" :key="endpoint.clientId">
     <div class="details">
       <div class="details-item">
-        <label>Licensed Size</label
-        ><span :title="endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.throughputText : undefined">{{ endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.name : "Send Only" }}</span>
-      </div>
-      <div class="details-item">
-        <label>Average Throughput/Month</label><span>{{ endpoint.totalMonthlyThroughput.toLocaleString() }}</span>
+        <label>Average Throughput/Month</label>
+        <span>{{ endpoint.totalMonthlyThroughput.toLocaleString() }}</span>
       </div>
       <div class="details-item" v-if="endpoint.classification === EndpointClassification.Full">
-        <label>Current Size</label><span :title="endpoint.currentSize.throughputText">{{ endpoint.currentSize.name }}</span>
+        <label>Current Size</label>
+        <span :title="endpoint.currentSize.throughputText">{{ endpoint.currentSize.name }}</span>
+      </div>
+      <div class="details-item">
+        <label>Licensed Size</label>
+        <span :title="endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.throughputText : undefined">{{ endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.name : "Send Only" }}</span>
       </div>
     </div>
     <ThroughputGraph :data="throughputByMonth" class="graph" v-if="throughputByMonth.length" />

From caf930af2c3feaaaa33f68ef03a3512db9b07138 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Wed, 15 Jul 2026 08:05:09 +0800
Subject: [PATCH 16/30] display warning on navigation controls when license is
 potentially in breach

---
 src/Frontend/src/components/ExclamationMark.vue       |  5 +++--
 .../src/views/throughputreport/EndpointsView.vue      | 11 ++++++++++-
 .../src/views/throughputreport/ThroughputMenuItem.vue |  8 ++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/Frontend/src/components/ExclamationMark.vue b/src/Frontend/src/components/ExclamationMark.vue
index 707fb4934e..397cf31cfb 100644
--- a/src/Frontend/src/components/ExclamationMark.vue
+++ b/src/Frontend/src/components/ExclamationMark.vue
@@ -24,11 +24,12 @@ const props = withDefaults(
 }
 
 .danger {
-  color: #ce4844 !important;
+  /* NOTE: this is currently being overwritten from main.css. https://github.com/Particular/ServicePulse/issues/3072 should address this */
+  color: #ce4844;
   background: linear-gradient(white, white) center/20% 72% no-repeat;
 }
 
 .warning {
-  color: #f3bc52 !important;
+  color: var(--bs-warning);
 }
 </style>
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index f5273bb7f3..74c41f2498 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -14,9 +14,15 @@ import LegendNotNServiceBusEndpoint from "./LegendNotNServiceBusEndpoint.vue";
 import LegendGatewayOrBridgeEndpoint from "./LegendGatewayOrBridgeEndpoint.vue";
 import LegendParticularPlatformEndpoint from "./LegendParticularPlatformEndpoint.vue";
 import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoRefresh";
+import ExclamationMark from "@/components/ExclamationMark.vue";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore.ts";
+import { WarningLevel } from "@/components/WarningLevel.ts";
 
 const { store } = useThroughputStoreAutoRefresh();
 const { isBrokerTransport } = storeToRefs(store);
+const licenseDetailsStore = useLicenseDetailsStore();
+const { endpoints } = storeToRefs(licenseDetailsStore);
+
 const showLegend = ref(false);
 
 const legendOptions = new Map<UserIndicator, Component>([
@@ -46,7 +52,10 @@ function toggleOptionsLegendVisible() {
           <RouterLink :to="routeLinks.throughput.queues.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
         </h5>
         <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
-          <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">License Details</RouterLink>
+          <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">
+            <span>License Details</span>
+            <ExclamationMark v-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
+          </RouterLink>
         </h5>
       </div>
     </div>
diff --git a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
index bcdd9a0e59..d2803b960b 100644
--- a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
+++ b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
@@ -3,12 +3,20 @@ import { RouterLink } from "vue-router";
 import routeLinks from "@/router/routeLinks";
 import FAIcon from "@/components/FAIcon.vue";
 import { faFileLines } from "@fortawesome/free-solid-svg-icons";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { storeToRefs } from "pinia";
+import ExclamationMark from "@/components/ExclamationMark.vue";
+import { WarningLevel } from "@/components/WarningLevel";
+
+const licenseDetailsStore = useLicenseDetailsStore();
+const { endpoints } = storeToRefs(licenseDetailsStore);
 </script>
 
 <template>
   <RouterLink :to="routeLinks.throughput.root">
     <FAIcon :icon="faFileLines" title="Usage" />
     <span class="navbar-label">Usage</span>
+    <ExclamationMark v-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
   </RouterLink>
 </template>
 

From dcbe4b71663c5d17639dcb131d8b4e5ef5c0e894 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 16 Jul 2026 09:56:33 +0800
Subject: [PATCH 17/30] read details from licensedetails API

---
 .../types.ts => resources/LicenseDetails.ts}  | 22 ++++-
 .../src/resources/QueueThroughputSummary.ts   |  2 +-
 .../src/stores/LicenseDetailsStore.ts         | 68 ++++++-------
 .../views/throughputreport/EndpointsView.vue  |  4 +-
 .../licenseDetails/CollapsedEndpoint.vue      |  2 +-
 .../licenseDetails/EndpointDetails.vue        |  2 +-
 .../licenseDetails/EndpointHeader.vue         |  2 +-
 .../licenseDetails/LicenseDetails.vue         | 99 +++++++++++--------
 .../licenseDetails/LicensedEndpointsView.vue  |  1 -
 .../licenseDetails/QueueData.vue              |  5 +-
 .../licenseDetails/QueueName.vue              |  2 +-
 .../isLicenseDetailsSupported.ts              |  8 ++
 .../queues/DetectedListView.vue               |  5 +-
 13 files changed, 130 insertions(+), 92 deletions(-)
 rename src/Frontend/src/{views/throughputreport/licenseDetails/types.ts => resources/LicenseDetails.ts} (76%)
 create mode 100644 src/Frontend/src/views/throughputreport/licenseDetails/isLicenseDetailsSupported.ts

diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/types.ts b/src/Frontend/src/resources/LicenseDetails.ts
similarity index 76%
rename from src/Frontend/src/views/throughputreport/licenseDetails/types.ts
rename to src/Frontend/src/resources/LicenseDetails.ts
index dbfddd61b2..d0f8be9d9b 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/types.ts
+++ b/src/Frontend/src/resources/LicenseDetails.ts
@@ -1,5 +1,25 @@
 import type QueueThroughputSummary from "@/resources/QueueThroughputSummary";
 
+export interface LicensedEndpointDetails {
+  endpoints: LicensedEndpoint[];
+  infrastructure_queues: Queue[];
+  excluded_queues: Queue[];
+  service_end_date: string;
+  products: Product[];
+}
+
+interface LicensedEndpoint {
+  name: string;
+  classification: EndpointClassification;
+  endpointSize: string;
+  queues: Queue[];
+}
+
+interface Product {
+  product_code: string;
+  monthly_throughput: number | null;
+}
+
 export enum EndpointClassification {
   Full = 0,
   SendOnly = 1,
@@ -29,7 +49,7 @@ export class Endpoint {
   }
 
   get totalMonthlyThroughput() {
-    return this.queues.map((queue) => queue.details?.max_monthly_throughput ?? 0).reduce((total, value) => total + value, 0);
+    return this.queues.map((queue) => queue.details?.average_monthly_throughput ?? 0).reduce((total, value) => total + value, 0);
   }
 
   get currentSize() {
diff --git a/src/Frontend/src/resources/QueueThroughputSummary.ts b/src/Frontend/src/resources/QueueThroughputSummary.ts
index c6000d9f53..271b3b2c92 100644
--- a/src/Frontend/src/resources/QueueThroughputSummary.ts
+++ b/src/Frontend/src/resources/QueueThroughputSummary.ts
@@ -8,7 +8,7 @@ interface QueueThroughputSummary {
   user_indicator: string;
   max_daily_throughput: number;
   monthly_throughput?: MonthlyThroughput[];
-  max_monthly_throughput?: number;
+  average_monthly_throughput?: number;
 }
 
 export interface MonthlyThroughput {
diff --git a/src/Frontend/src/stores/LicenseDetailsStore.ts b/src/Frontend/src/stores/LicenseDetailsStore.ts
index e32b5aedfb..f2a4261585 100644
--- a/src/Frontend/src/stores/LicenseDetailsStore.ts
+++ b/src/Frontend/src/stores/LicenseDetailsStore.ts
@@ -1,50 +1,44 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
-import { ref } from "vue";
+import logger from "@/logger";
+import { ref, watch } from "vue";
 import createThroughputClient from "@/views/throughputreport/throughputClient";
-import { Endpoint, EndpointSize, type Queue } from "@/views/throughputreport/licenseDetails/types";
-
-//TODO: get from the metadata file
-const endpointSizes = [
-  new EndpointSize("4", 0, 4),
-  new EndpointSize("16", 4, 16),
-  new EndpointSize("64", 16, 64),
-  new EndpointSize("256", 64, 256),
-  new EndpointSize("1024", 256, 1_024),
-  new EndpointSize("4K", 1_024, 4_096),
-  new EndpointSize("16K", 4_096, 16_384),
-  new EndpointSize("64K", 16_384, 65_536),
-  new EndpointSize("256K", 65_536, 262_144),
-  new EndpointSize("1024K", 262_144, 1_048_576),
-  new EndpointSize("4M", 1_048_576, 4_194_304),
-  new EndpointSize("16M", 4_194_304, 16_777_216),
-  new EndpointSize("64M", 16_777_216, 67_108_864),
-  new EndpointSize("256M", 67_108_864, 268_435_456),
-  new EndpointSize("1024M", 268_435_456, 1_073_741_824),
-  new EndpointSize("U", 1_073_741_824, null),
-];
+import { Endpoint, EndpointSize, type Queue } from "@/resources/LicenseDetails";
+import serviceControlClient from "@/components/serviceControlClient";
+import type { LicensedEndpointDetails } from "@/resources/LicenseDetails";
+import useIsLicenseDetailsSupported from "@/views/throughputreport/licenseDetails/isLicenseDetailsSupported";
 
 export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
+  const endpointSizes = ref<EndpointSize[]>([]);
   const endpoints = ref<Endpoint[]>([]);
   const infrastructureQueues = ref<Queue[]>([]);
   const excludedQueues = ref<Queue[]>([]);
 
   async function refresh() {
-    const sample: any = await import("@/views/throughputreport/licenseDetails/sample.json");
-    const throughputClient = createThroughputClient();
-    const scQueues = await throughputClient.queues();
-
-    const toQueue = (metaQ: any) =>
-      ({
-        nameHash: metaQ.nameHash,
-        scope: metaQ.scope,
-        details: scQueues.find((scQ) => scQ.name_hash === metaQ.nameHash),
-      }) as Queue;
-
-    endpoints.value = sample.endpoints.map((metaEp: any) => new Endpoint(crypto.randomUUID(), metaEp.name, metaEp.queues.map(toQueue), metaEp.classification, endpointSizes.find((es) => es.name === metaEp.endpointSize)!, endpointSizes));
-    infrastructureQueues.value = sample.infrastructureQueues.map(toQueue);
-    excludedQueues.value = sample.excludedQueues.map(toQueue);
+    try {
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<LicensedEndpointDetails>("license/details");
+      const throughputClient = createThroughputClient();
+      const scQueues = await throughputClient.queues();
+
+      const toQueue = (metaQ: any) =>
+        ({
+          nameHash: metaQ.nameHash,
+          scope: metaQ.scope,
+          details: scQueues.find((scQ) => scQ.name_hash === metaQ.name_hash),
+        }) as Queue;
+
+      const sortedProducts = data.products.toSorted((p1, p2) => (p1.monthly_throughput ?? Number.MAX_VALUE) - (p2.monthly_throughput ?? Number.MAX_VALUE));
+      const sortedEndpointSizes = sortedProducts.map((product, i) => new EndpointSize(product.product_code, i > 0 ? (sortedProducts[i - 1].monthly_throughput ?? 0) : 0, product.monthly_throughput));
+      endpointSizes.value = sortedEndpointSizes;
+      endpoints.value = data.endpoints.map((metaEp: any) => new Endpoint(crypto.randomUUID(), metaEp.name, metaEp.queues.map(toQueue), metaEp.classification, sortedEndpointSizes.find((es) => es.name === metaEp.endpoint_size)!, sortedEndpointSizes));
+      infrastructureQueues.value = data.infrastructure_queues.map(toQueue);
+      excludedQueues.value = data.excluded_queues.map(toQueue);
+    } catch (err) {
+      logger.error("Error fetching license information", err);
+    }
   }
-  refresh();
+
+  const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
+  watch(isLicenseDetailsSupported, (supported: boolean) => supported && refresh());
 
   return {
     endpoints,
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index 74c41f2498..15dcfc6ba5 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -17,11 +17,13 @@ import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoR
 import ExclamationMark from "@/components/ExclamationMark.vue";
 import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore.ts";
 import { WarningLevel } from "@/components/WarningLevel.ts";
+import useIsLicenseDetailsSupported from "./licenseDetails/isLicenseDetailsSupported.ts";
 
 const { store } = useThroughputStoreAutoRefresh();
 const { isBrokerTransport } = storeToRefs(store);
 const licenseDetailsStore = useLicenseDetailsStore();
 const { endpoints } = storeToRefs(licenseDetailsStore);
+const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
 
 const showLegend = ref(false);
 
@@ -51,7 +53,7 @@ function toggleOptionsLegendVisible() {
         <h5 v-if="isBrokerTransport" class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedBrokerQueues.link) }">
           <RouterLink :to="routeLinks.throughput.queues.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
         </h5>
-        <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
+        <h5 class="nav-item" v-if="isLicenseDetailsSupported" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
           <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">
             <span>License Details</span>
             <ExclamationMark v-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
index f7f41dea19..52c42fc3af 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { EndpointClassification, type Endpoint } from "./types";
+import { EndpointClassification, type Endpoint } from "@/resources/LicenseDetails";
 import FAIcon from "@/components/FAIcon.vue";
 import { faCircleChevronDown } from "@fortawesome/free-solid-svg-icons";
 
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
index 94f77369a0..b5b5734b9d 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { EndpointClassification, type Endpoint } from "./types.ts";
+import { EndpointClassification, type Endpoint } from "@/resources/LicenseDetails";
 import QueueData from "./QueueData.vue";
 import { computed } from "vue";
 import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary.ts";
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
index 3cbf9ce5aa..ddf5520beb 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, useTemplateRef, watch } from "vue";
-import { EndpointClassification, type Endpoint } from "./types";
+import { EndpointClassification, type Endpoint } from "@/resources/LicenseDetails";
 import FAIcon from "@/components/FAIcon.vue";
 import { faCircleChevronUp } from "@fortawesome/free-solid-svg-icons";
 
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
index 7854407664..bc444026de 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
@@ -9,10 +9,13 @@ import ColumnHeader from "@/components/ColumnHeader.vue";
 import ExclamationMark from "@/components/ExclamationMark.vue";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { WarningLevel } from "@/components/WarningLevel";
+import useIsLicenseDetailsSupported, { minimumSCVersionForLicenseDetails } from "./isLicenseDetailsSupported";
+import ConditionalRender from "@/components/ConditionalRender.vue";
+
+const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
 
 const licenseDetailsStore = useLicenseDetailsStore();
-const { endpoints } = storeToRefs(licenseDetailsStore);
-const { endpointSizes } = licenseDetailsStore;
+const { endpoints, endpointSizes } = storeToRefs(licenseDetailsStore);
 
 const sizes = computed(() =>
   endpoints.value.reduce(
@@ -29,54 +32,68 @@ const sizes = computed(() =>
 );
 const licensedCounts = computed(() => sizes.value.licensed);
 const currentCounts = computed(() => sizes.value.current);
-const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...currentCounts.value.keys()])].sort((a, b) => endpointSizes.findIndex((size) => size.name === a) - endpointSizes.findIndex((size) => size.name === b)));
+const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...currentCounts.value.keys()])].sort((a, b) => endpointSizes.value.findIndex((size) => size.name === a) - endpointSizes.value.findIndex((size) => size.name === b)));
 </script>
 
 <template>
-  <div class="box">
-    <h3>Licensed Endpoints</h3>
-    <div class="licensed-endpoints col-6">
-      <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
-        <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-8" />
-        <ColumnHeader name="Licensed" label="Licensed" class="col-2" />
-        <ColumnHeader name="Used" label="Used" class="col-2" />
+  <ConditionalRender :supported="isLicenseDetailsSupported">
+    <template #unsupported>
+      <div class="not-supported">
+        <p>
+          The minimum version of ServiceControl required to enable this feature is
+          <span> {{ minimumSCVersionForLicenseDetails }} </span>.
+        </p>
+        <div>
+          <a class="btn btn-default btn-primary" href="https://particular.net/downloads" target="_blank">Update ServiceControl to latest version</a>
+        </div>
       </div>
-      <DataView :data="allSizes">
-        <template #data="{ pageData }">
-          <div role="rowgroup" aria-label="endpoints">
-            <div role="row" class="row grid-row" v-for="size in pageData" :key="size">
-              <span class="col-8" :title="endpointSizes.find((eps) => eps.name === size)?.throughputText">
-                {{ size }}
-              </span>
-              <span class="col-2">
-                {{ (licensedCounts.get(size) ?? 0).toLocaleString() }}
-              </span>
-              <span class="col-2 current-size">
-                {{ (currentCounts.get(size) ?? 0).toLocaleString() }}
-                <ExclamationMark v-if="(licensedCounts.get(size) ?? 0) !== (currentCounts.get(size) ?? 0)" :icon="faWarning" :type="WarningLevel.Warning" />
-              </span>
+    </template>
+
+    <div class="box">
+      <h3>Licensed Endpoints</h3>
+      <div class="licensed-endpoints col-6">
+        <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
+          <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-8" />
+          <ColumnHeader name="Licensed" label="Licensed" class="col-2" />
+          <ColumnHeader name="Used" label="Used" class="col-2" />
+        </div>
+        <DataView :data="allSizes">
+          <template #data="{ pageData }">
+            <div role="rowgroup" aria-label="endpoints">
+              <div role="row" class="row grid-row" v-for="size in pageData" :key="size">
+                <span class="col-8" :title="endpointSizes.find((eps) => eps.name === size)?.throughputText">
+                  {{ size }}
+                </span>
+                <span class="col-2">
+                  {{ (licensedCounts.get(size) ?? 0).toLocaleString() }}
+                </span>
+                <span class="col-2 current-size">
+                  {{ (currentCounts.get(size) ?? 0).toLocaleString() }}
+                  <ExclamationMark v-if="(licensedCounts.get(size) ?? 0) !== (currentCounts.get(size) ?? 0)" :icon="faWarning" :type="WarningLevel.Warning" />
+                </span>
+              </div>
             </div>
+          </template>
+        </DataView>
+      </div>
+      <div class="row mt-3">
+        <div class="col-sm-12">
+          <div class="nav tabs">
+            <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.licensedEndpoints.link) }">
+              <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">Licensed Endpoints</RouterLink>
+            </h5>
+            <h5 class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.infrastructureQueues.link) }">
+              <RouterLink :to="routeLinks.throughput.licenseDetails.infrastructureQueues.link">Infrastructure Queues</RouterLink>
+            </h5>
+            <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.excludedQueues.link) }">
+              <RouterLink :to="routeLinks.throughput.licenseDetails.excludedQueues.link">Excluded Queues</RouterLink>
+            </h5>
           </div>
-        </template>
-      </DataView>
-    </div>
-    <div class="row mt-3">
-      <div class="col-sm-12">
-        <div class="nav tabs">
-          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.licensedEndpoints.link) }">
-            <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">Licensed Endpoints</RouterLink>
-          </h5>
-          <h5 class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.infrastructureQueues.link) }">
-            <RouterLink :to="routeLinks.throughput.licenseDetails.infrastructureQueues.link">Infrastructure Queues</RouterLink>
-          </h5>
-          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.excludedQueues.link) }">
-            <RouterLink :to="routeLinks.throughput.licenseDetails.excludedQueues.link">Excluded Queues</RouterLink>
-          </h5>
         </div>
       </div>
+      <RouterView />
     </div>
-    <RouterView />
-  </div>
+  </ConditionalRender>
 </template>
 
 <style scoped>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
index 44d4e90d51..04fce708ee 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -6,7 +6,6 @@ import EndpointHeader from "./EndpointHeader.vue";
 import EndpointDetails from "./EndpointDetails.vue";
 import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore.ts";
 import { storeToRefs } from "pinia";
-import type { Endpoint } from "./types.ts";
 
 const licenseDetailsStore = useLicenseDetailsStore();
 const { endpoints } = storeToRefs(licenseDetailsStore);
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
index 67f51312cd..a4ee35763f 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
@@ -2,7 +2,7 @@
 import DataView from "@/components/DataView.vue";
 import InlineThroughputGraph from "../queues/InlineThroughputGraph.vue";
 import QueueName from "./QueueName.vue";
-import type { Queue } from "./types.ts";
+import type { Queue } from "@/resources/LicenseDetails";
 
 const props = defineProps<{
   queues: Queue[];
@@ -30,8 +30,7 @@ const props = defineProps<{
             <td class="text-end">
               <div class="throughput">
                 <InlineThroughputGraph class="position-right" v-if="queue.details?.monthly_throughput?.length" :data="queue.details.monthly_throughput" />
-                <!-- {{ NumberFormat.format(queue.averageMonthlyThroughput) }} -->
-                {{ queue.details?.max_monthly_throughput?.toLocaleString() }}
+                {{ queue.details?.average_monthly_throughput?.toLocaleString() }}
               </div>
             </td>
             <td v-if="actionsComponent">
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/QueueName.vue b/src/Frontend/src/views/throughputreport/licenseDetails/QueueName.vue
index 4d2837c1b2..2211ab5f99 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/QueueName.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/QueueName.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Queue } from "./types";
+import type { Queue } from "@/resources/LicenseDetails";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import ExclamationMark from "@/components/ExclamationMark.vue";
 import { WarningLevel } from "@/components/WarningLevel";
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/isLicenseDetailsSupported.ts b/src/Frontend/src/views/throughputreport/licenseDetails/isLicenseDetailsSupported.ts
new file mode 100644
index 0000000000..5eb415eb43
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/isLicenseDetailsSupported.ts
@@ -0,0 +1,8 @@
+import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
+
+export const minimumSCVersionForLicenseDetails = "6.19.0";
+
+export default function useIsLicenseDetailsSupported() {
+  const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
+  return environmentStore.serviceControlIsGreaterThan(minimumSCVersionForLicenseDetails);
+}
diff --git a/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
index 7bd283e123..b9deb20aa2 100644
--- a/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
@@ -236,7 +236,7 @@ async function save() {
     <thead>
       <tr>
         <th scope="col">{{ props.columnTitle }}</th>
-        <th v-if="showMonthly" scope="col" class="text-end formatThroughputColumn">Highest monthly throughput <FAIcon :icon="faInfoCircle" class="text-primary" v-tippy="'In the last 12 months'" /></th>
+        <th v-if="showMonthly" scope="col" class="text-end formatThroughputColumn">Average monthly throughput <FAIcon :icon="faInfoCircle" class="text-primary" v-tippy="'In the last 12 months'" /></th>
         <th v-else scope="col" class="text-end formatThroughputColumn">Maximum daily throughput <FAIcon :icon="faInfoCircle" class="text-primary" v-tippy="'In the last 12 months'" /></th>
         <th scope="col">Endpoint Type <FAIcon :icon="faInfoCircle" class="text-primary" v-tippy="'Pick the most correct option'" /></th>
       </tr>
@@ -252,8 +252,7 @@ async function save() {
             {{ row.name }}
           </div>
         </td>
-        <!--TODO: this needs to show average monthly, not max-->
-        <td v-if="showMonthly" class="col text-end formatThroughputColumn" style="width: 250px" aria-label="maximum usage throughput">{{ row.max_monthly_throughput ? row.max_monthly_throughput.toLocaleString() : "0" }}</td>
+        <td v-if="showMonthly" class="col text-end formatThroughputColumn" style="width: 250px" aria-label="average monthly throughput">{{ row.average_monthly_throughput ? row.average_monthly_throughput.toLocaleString() : "0" }}</td>
         <td v-else class="col text-end formatThroughputColumn" style="width: 250px" aria-label="maximum usage throughput">{{ row.max_daily_throughput.toLocaleString() }}</td>
         <td class="col" style="width: 350px" aria-label="endpoint type">
           <select class="form-select endpointType format-text" @change="(event) => updateIndicator(event, row.name)">

From 70f6fc87bf49e02256d5d43de1e1bc9db98648d1 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 16 Jul 2026 14:40:40 +0800
Subject: [PATCH 18/30] handle upload of metadata file

---
 .../platformcapabilities/CapabilityCard.vue   | 40 ++++-----
 .../platformcapabilities/constants.ts         |  1 +
 .../src/components/serviceControlClient.ts    | 25 +++++-
 .../src/stores/LicenseDetailsStore.ts         | 23 ++++-
 .../views/throughputreport/EndpointsView.vue  |  3 +-
 .../licenseDetails/LicenseDetails.vue         | 86 ++++++++++---------
 .../licenseDetails/NoMetadata.vue             | 72 ++++++++++++++++
 7 files changed, 185 insertions(+), 65 deletions(-)
 create mode 100644 src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue

diff --git a/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue b/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
index b196067510..b9d61921f2 100644
--- a/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
+++ b/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
@@ -2,7 +2,7 @@
 import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
 import FAIcon from "@/components/FAIcon.vue";
-import { faCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faCircle, faExternalLink, faTimes } from "@fortawesome/free-solid-svg-icons";
 import type { StatusIndicator, WizardPage } from "@/components/platformcapabilities/types";
 import { Capability, CapabilityStatus } from "@/components/platformcapabilities/constants";
 import WizardDialog from "./WizardDialog.vue";
@@ -13,17 +13,21 @@ const emit = defineEmits<{
   hide: [];
 }>();
 
-const props = defineProps<{
-  status: CapabilityStatus;
-  title: Capability;
-  subtitle: string;
-  helpButtonText: string;
-  helpButtonUrl: string;
-  description: string;
-  indicators?: StatusIndicator[];
-  isLoading?: boolean;
-  wizardPages?: WizardPage[];
-}>();
+const props = withDefaults(
+  defineProps<{
+    status: CapabilityStatus;
+    title: Capability;
+    subtitle: string;
+    helpButtonText: string;
+    helpButtonUrl: string;
+    description: string;
+    indicators?: StatusIndicator[];
+    isLoading?: boolean;
+    wizardPages?: WizardPage[];
+    allowDismiss?: boolean;
+  }>(),
+  { allowDismiss: true }
+);
 
 const showWizard = ref(false);
 
@@ -33,14 +37,12 @@ const shouldShowWizard = computed(() => {
 
 const dataStatus = computed(() => (props.isLoading ? "loading" : props.status.toLowerCase().replace(/ /g, "-")));
 
-function isExternalUrl(url: string): boolean {
-  return url.startsWith("http://") || url.startsWith("https://");
-}
+const isExternalUrl = computed(() => props.helpButtonUrl.startsWith("http://") || props.helpButtonUrl.startsWith("https://"));
 
 function handleButtonClick() {
   if (shouldShowWizard.value) {
     showWizard.value = true;
-  } else if (isExternalUrl(props.helpButtonUrl)) {
+  } else if (isExternalUrl.value) {
     window.open(props.helpButtonUrl, "_blank");
   } else {
     router.push(props.helpButtonUrl);
@@ -83,7 +85,7 @@ function handleButtonClick() {
           >
             {{ props.status }}
           </span>
-          <button class="hide-card-btn" @click="emit('hide')" v-tippy="'Hide this card'">
+          <button v-if="allowDismiss" class="hide-card-btn" @click="emit('hide')" v-tippy="'Hide this card'">
             <FAIcon :icon="faTimes" />
           </button>
         </div>
@@ -94,9 +96,7 @@ function handleButtonClick() {
       <div class="capability-description">
         {{ props.description }}
       </div>
-      <button class="btn btn-primary" @click="handleButtonClick">
-        {{ props.helpButtonText }}
-      </button>
+      <button class="btn btn-primary" @click="handleButtonClick">{{ props.helpButtonText }} <FAIcon v-if="!shouldShowWizard && isExternalUrl" :icon="faExternalLink" /></button>
     </div>
 
     <WizardDialog v-if="showWizard && wizardPages" :title="`Getting Started with ${props.title}`" :pages="wizardPages" @close="showWizard = false" />
diff --git a/src/Frontend/src/components/platformcapabilities/constants.ts b/src/Frontend/src/components/platformcapabilities/constants.ts
index c2fb1242ad..3986b12e60 100644
--- a/src/Frontend/src/components/platformcapabilities/constants.ts
+++ b/src/Frontend/src/components/platformcapabilities/constants.ts
@@ -10,4 +10,5 @@ export enum Capability {
   Monitoring = "Monitoring",
   Auditing = "Auditing",
   Error = "Recoverability",
+  LicensedEndpointTracking = "Licensed Endpoint Tracking",
 }
diff --git a/src/Frontend/src/components/serviceControlClient.ts b/src/Frontend/src/components/serviceControlClient.ts
index 73e3c0c9e0..f2654a6d8c 100644
--- a/src/Frontend/src/components/serviceControlClient.ts
+++ b/src/Frontend/src/components/serviceControlClient.ts
@@ -30,8 +30,17 @@ class ServiceControlClient {
 
   public async fetchTypedFromServiceControl<T>(suffix: string, signal?: AbortSignal): Promise<[Response, T]> {
     const response = await authFetch(`${this.url}${suffix}`, { signal });
-    if (!response.ok) throw new Error(response.statusText ?? "No response");
-    const data = await response.json();
+    if (!response.ok) {
+      let error = new Error(response.statusText ?? "No response");
+      if (response.status === 400) {
+        try {
+          const errorResponse = await response.json();
+          error = new Error(errorResponse.detail ?? errorResponse.title);
+        } catch {}
+      }
+      throw error;
+    }
+    const data = response.status !== 204 && (await response.json());
 
     return [response, data];
   }
@@ -47,6 +56,18 @@ class ServiceControlClient {
     return await authFetch(`${this.url}${suffix}`, requestOptions);
   }
 
+  public async postFileToServiceControl(suffix: string, file: File, paramName = "file") {
+    const formData = new FormData();
+    formData.append(paramName, file);
+
+    const requestOptions: RequestInit = {
+      method: "POST",
+      body: formData,
+    };
+
+    return await authFetch(`${this.url}${suffix}`, requestOptions);
+  }
+
   public async putToServiceControl(suffix: string, payload: object | null) {
     const requestOptions: RequestInit = {
       method: "PUT",
diff --git a/src/Frontend/src/stores/LicenseDetailsStore.ts b/src/Frontend/src/stores/LicenseDetailsStore.ts
index f2a4261585..f7fb784d67 100644
--- a/src/Frontend/src/stores/LicenseDetailsStore.ts
+++ b/src/Frontend/src/stores/LicenseDetailsStore.ts
@@ -12,10 +12,16 @@ export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
   const endpoints = ref<Endpoint[]>([]);
   const infrastructureQueues = ref<Queue[]>([]);
   const excludedQueues = ref<Queue[]>([]);
+  const hasLicenseDetails = ref(false);
+  const error = ref<string | null>();
 
   async function refresh() {
     try {
+      error.value = null;
       const [, data] = await serviceControlClient.fetchTypedFromServiceControl<LicensedEndpointDetails>("license/details");
+      if (!data) return;
+
+      hasLicenseDetails.value = true;
       const throughputClient = createThroughputClient();
       const scQueues = await throughputClient.queues();
 
@@ -32,9 +38,19 @@ export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
       endpoints.value = data.endpoints.map((metaEp: any) => new Endpoint(crypto.randomUUID(), metaEp.name, metaEp.queues.map(toQueue), metaEp.classification, sortedEndpointSizes.find((es) => es.name === metaEp.endpoint_size)!, sortedEndpointSizes));
       infrastructureQueues.value = data.infrastructure_queues.map(toQueue);
       excludedQueues.value = data.excluded_queues.map(toQueue);
-    } catch (err) {
-      logger.error("Error fetching license information", err);
+    } catch (err: any) {
+      error.value = `Error fetching endpoint metadata: ${err.message ?? err}`;
+      logger.error("Error fetching endpoint metadata", err);
+    }
+  }
+
+  async function uploadEndpointMetadata(file: File) {
+    const response = await serviceControlClient.postFileToServiceControl("license/detailsUpload", file);
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(`Upload Failed: ${response.status} ${response.statusText} - ${text}`);
     }
+    await refresh();
   }
 
   const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
@@ -45,6 +61,9 @@ export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
     endpointSizes,
     infrastructureQueues,
     excludedQueues,
+    hasLicenseDetails,
+    error,
+    uploadEndpointMetadata,
   };
 });
 
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index 15dcfc6ba5..307c8a2de6 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -22,7 +22,7 @@ import useIsLicenseDetailsSupported from "./licenseDetails/isLicenseDetailsSuppo
 const { store } = useThroughputStoreAutoRefresh();
 const { isBrokerTransport } = storeToRefs(store);
 const licenseDetailsStore = useLicenseDetailsStore();
-const { endpoints } = storeToRefs(licenseDetailsStore);
+const { endpoints, error: licenseDetailsError } = storeToRefs(licenseDetailsStore);
 const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
 
 const showLegend = ref(false);
@@ -57,6 +57,7 @@ function toggleOptionsLegendVisible() {
           <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">
             <span>License Details</span>
             <ExclamationMark v-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
+            <ExclamationMark v-else-if="licenseDetailsError" :type="WarningLevel.Danger" />
           </RouterLink>
         </h5>
       </div>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
index bc444026de..f52618e50e 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
@@ -11,11 +11,12 @@ import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { WarningLevel } from "@/components/WarningLevel";
 import useIsLicenseDetailsSupported, { minimumSCVersionForLicenseDetails } from "./isLicenseDetailsSupported";
 import ConditionalRender from "@/components/ConditionalRender.vue";
+import NoMetadata from "./NoMetadata.vue";
 
 const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
 
 const licenseDetailsStore = useLicenseDetailsStore();
-const { endpoints, endpointSizes } = storeToRefs(licenseDetailsStore);
+const { endpoints, endpointSizes, hasLicenseDetails, error } = storeToRefs(licenseDetailsStore);
 
 const sizes = computed(() =>
   endpoints.value.reduce(
@@ -49,50 +50,55 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
       </div>
     </template>
 
-    <div class="box">
-      <h3>Licensed Endpoints</h3>
-      <div class="licensed-endpoints col-6">
-        <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
-          <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-8" />
-          <ColumnHeader name="Licensed" label="Licensed" class="col-2" />
-          <ColumnHeader name="Used" label="Used" class="col-2" />
-        </div>
-        <DataView :data="allSizes">
-          <template #data="{ pageData }">
-            <div role="rowgroup" aria-label="endpoints">
-              <div role="row" class="row grid-row" v-for="size in pageData" :key="size">
-                <span class="col-8" :title="endpointSizes.find((eps) => eps.name === size)?.throughputText">
-                  {{ size }}
-                </span>
-                <span class="col-2">
-                  {{ (licensedCounts.get(size) ?? 0).toLocaleString() }}
-                </span>
-                <span class="col-2 current-size">
-                  {{ (currentCounts.get(size) ?? 0).toLocaleString() }}
-                  <ExclamationMark v-if="(licensedCounts.get(size) ?? 0) !== (currentCounts.get(size) ?? 0)" :icon="faWarning" :type="WarningLevel.Warning" />
-                </span>
+    <ConditionalRender :supported="hasLicenseDetails">
+      <template #unsupported>
+        <NoMetadata :metadataError="error" />
+      </template>
+      <div class="box">
+        <h3>Licensed Endpoints</h3>
+        <div class="licensed-endpoints col-6">
+          <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
+            <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-8" />
+            <ColumnHeader name="Licensed" label="Licensed" class="col-2" />
+            <ColumnHeader name="Used" label="Used" class="col-2" />
+          </div>
+          <DataView :data="allSizes">
+            <template #data="{ pageData }">
+              <div role="rowgroup" aria-label="endpoints">
+                <div role="row" class="row grid-row" v-for="size in pageData" :key="size">
+                  <span class="col-8" :title="endpointSizes.find((eps) => eps.name === size)?.throughputText">
+                    {{ size }}
+                  </span>
+                  <span class="col-2">
+                    {{ (licensedCounts.get(size) ?? 0).toLocaleString() }}
+                  </span>
+                  <span class="col-2 current-size">
+                    {{ (currentCounts.get(size) ?? 0).toLocaleString() }}
+                    <ExclamationMark v-if="(licensedCounts.get(size) ?? 0) !== (currentCounts.get(size) ?? 0)" :icon="faWarning" :type="WarningLevel.Warning" />
+                  </span>
+                </div>
               </div>
+            </template>
+          </DataView>
+        </div>
+        <div class="row mt-3">
+          <div class="col-sm-12">
+            <div class="nav tabs">
+              <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.licensedEndpoints.link) }">
+                <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">Licensed Endpoints</RouterLink>
+              </h5>
+              <h5 class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.infrastructureQueues.link) }">
+                <RouterLink :to="routeLinks.throughput.licenseDetails.infrastructureQueues.link">Infrastructure Queues</RouterLink>
+              </h5>
+              <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.excludedQueues.link) }">
+                <RouterLink :to="routeLinks.throughput.licenseDetails.excludedQueues.link">Excluded Queues</RouterLink>
+              </h5>
             </div>
-          </template>
-        </DataView>
-      </div>
-      <div class="row mt-3">
-        <div class="col-sm-12">
-          <div class="nav tabs">
-            <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.licensedEndpoints.link) }">
-              <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">Licensed Endpoints</RouterLink>
-            </h5>
-            <h5 class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.infrastructureQueues.link) }">
-              <RouterLink :to="routeLinks.throughput.licenseDetails.infrastructureQueues.link">Infrastructure Queues</RouterLink>
-            </h5>
-            <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.excludedQueues.link) }">
-              <RouterLink :to="routeLinks.throughput.licenseDetails.excludedQueues.link">Excluded Queues</RouterLink>
-            </h5>
           </div>
         </div>
+        <RouterView />
       </div>
-      <RouterView />
-    </div>
+    </ConditionalRender>
   </ConditionalRender>
 </template>
 
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue b/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue
new file mode 100644
index 0000000000..c521f116a7
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import ActionButton from "@/components/ActionButton.vue";
+import CapabilityCard from "@/components/platformcapabilities/CapabilityCard.vue";
+import { Capability, CapabilityStatus } from "@/components/platformcapabilities/constants";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { computed, ref } from "vue";
+
+defineProps<{ metadataError?: string | null }>();
+
+const licenseDetailsStore = useLicenseDetailsStore();
+
+const file = ref<File>();
+const canUpload = computed(() => file.value);
+function enableUploadFile(event: Event) {
+  file.value = ((event.target as HTMLInputElement)?.files ?? [])[0];
+}
+
+const saving = ref(false);
+const uploadError = ref(false);
+async function handleSubmit() {
+  if (!file.value) return;
+
+  uploadError.value = false;
+  saving.value = true;
+  try {
+    await licenseDetailsStore.uploadEndpointMetadata(file.value);
+  } catch (e) {
+    console.error(e);
+    uploadError.value = true;
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="no-metadata mt-2">
+    <div v-if="metadataError" class="alert alert-danger">{{ metadataError }}</div>
+    <CapabilityCard
+      :title="Capability.LicensedEndpointTracking"
+      subtitle="Track throughput against licensed endpoints"
+      :status="CapabilityStatus.InstanceNotConfigured"
+      description="Depending on your system setup, it is possible to track current usage and maintain queues associated with licensed endpoints. This can assist when determining renewal costs, and also assists Particular with determining the correct processing of your usage report. This functionality requires an endpoint metadata file which is linked to your license and, if available for your system, can be downloaded from the customer portal to be uploaded into ServiceControl here."
+      help-button-text="Customer Portal"
+      help-button-url="https://customers.particular.net"
+      :allow-dismiss="false"
+    />
+    <div class="box">
+      <span>Once you have an endpoint metadata file from Particular, upload it into ServiceControl here:</span>
+      <div class="alert alert-danger" role="alert" v-if="uploadError">Upload Failed!</div>
+      <form method="post" enctype="multipart/form-data" @submit.prevent="handleSubmit">
+        <div>
+          <input id="file-upload" type="file" class="form-control" accept=".plm" :onchange="enableUploadFile" :disabled="saving" />
+        </div>
+        <div class="mt-3">
+          <ActionButton class="btn btn-outline-secondary" type="submit" id="submit-upload-files" :loading="saving" :disabled="!canUpload">Upload File</ActionButton>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.no-metadata {
+  max-width: 80em;
+  color: #666;
+}
+
+.alert {
+  font-size: 0.8rem;
+}
+</style>

From 169f04199227c9077b9fe1c6c4d599881c4dbb17 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 17 Jul 2026 15:12:31 +0800
Subject: [PATCH 19/30] validate endpoint metadata id and licenseid match

---
 src/Frontend/src/components/DataView.vue      |  1 +
 src/Frontend/src/resources/LicenseDetails.ts  |  1 +
 .../src/stores/LicenseDetailsStore.ts         |  6 +++
 .../views/throughputreport/EndpointsView.vue  |  6 +--
 .../throughputreport/ThroughputMenuItem.vue   |  5 +-
 .../licenseDetails/LicenseDetails.vue         | 50 +++++++++++++++++--
 .../licenseDetails/NoMetadata.vue             | 42 +---------------
 .../licenseDetails/UploadMetadata.vue         | 45 +++++++++++++++++
 8 files changed, 108 insertions(+), 48 deletions(-)
 create mode 100644 src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue

diff --git a/src/Frontend/src/components/DataView.vue b/src/Frontend/src/components/DataView.vue
index 82e5787e54..7b6fb9e58c 100644
--- a/src/Frontend/src/components/DataView.vue
+++ b/src/Frontend/src/components/DataView.vue
@@ -38,6 +38,7 @@ watch(pageNumber, () => emit("pageChanged"));
   position: sticky;
   bottom: 0;
   margin-bottom: 0;
+  margin-top: 3em;
 }
 
 .sticky-pagination {
diff --git a/src/Frontend/src/resources/LicenseDetails.ts b/src/Frontend/src/resources/LicenseDetails.ts
index d0f8be9d9b..f24b6c2353 100644
--- a/src/Frontend/src/resources/LicenseDetails.ts
+++ b/src/Frontend/src/resources/LicenseDetails.ts
@@ -6,6 +6,7 @@ export interface LicensedEndpointDetails {
   excluded_queues: Queue[];
   service_end_date: string;
   products: Product[];
+  valid_id: boolean;
 }
 
 interface LicensedEndpoint {
diff --git a/src/Frontend/src/stores/LicenseDetailsStore.ts b/src/Frontend/src/stores/LicenseDetailsStore.ts
index f7fb784d67..22d69b4bb1 100644
--- a/src/Frontend/src/stores/LicenseDetailsStore.ts
+++ b/src/Frontend/src/stores/LicenseDetailsStore.ts
@@ -12,6 +12,8 @@ export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
   const endpoints = ref<Endpoint[]>([]);
   const infrastructureQueues = ref<Queue[]>([]);
   const excludedQueues = ref<Queue[]>([]);
+  const serviceEndDate = ref<Date>();
+  const validId = ref<boolean>(false);
   const hasLicenseDetails = ref(false);
   const error = ref<string | null>();
 
@@ -38,6 +40,8 @@ export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
       endpoints.value = data.endpoints.map((metaEp: any) => new Endpoint(crypto.randomUUID(), metaEp.name, metaEp.queues.map(toQueue), metaEp.classification, sortedEndpointSizes.find((es) => es.name === metaEp.endpoint_size)!, sortedEndpointSizes));
       infrastructureQueues.value = data.infrastructure_queues.map(toQueue);
       excludedQueues.value = data.excluded_queues.map(toQueue);
+      serviceEndDate.value = new Date(data.service_end_date);
+      validId.value = data.valid_id;
     } catch (err: any) {
       error.value = `Error fetching endpoint metadata: ${err.message ?? err}`;
       logger.error("Error fetching endpoint metadata", err);
@@ -61,6 +65,8 @@ export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
     endpointSizes,
     infrastructureQueues,
     excludedQueues,
+    serviceEndDate,
+    validId,
     hasLicenseDetails,
     error,
     uploadEndpointMetadata,
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index 307c8a2de6..a18d293d03 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -22,7 +22,7 @@ import useIsLicenseDetailsSupported from "./licenseDetails/isLicenseDetailsSuppo
 const { store } = useThroughputStoreAutoRefresh();
 const { isBrokerTransport } = storeToRefs(store);
 const licenseDetailsStore = useLicenseDetailsStore();
-const { endpoints, error: licenseDetailsError } = storeToRefs(licenseDetailsStore);
+const { endpoints, validId, error: licenseDetailsError } = storeToRefs(licenseDetailsStore);
 const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
 
 const showLegend = ref(false);
@@ -56,8 +56,8 @@ function toggleOptionsLegendVisible() {
         <h5 class="nav-item" v-if="isLicenseDetailsSupported" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
           <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">
             <span>License Details</span>
-            <ExclamationMark v-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
-            <ExclamationMark v-else-if="licenseDetailsError" :type="WarningLevel.Danger" />
+            <ExclamationMark v-if="licenseDetailsError || !validId" :type="WarningLevel.Danger" />
+            <ExclamationMark v-else-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
           </RouterLink>
         </h5>
       </div>
diff --git a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
index d2803b960b..a203e7ee4e 100644
--- a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
+++ b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
@@ -9,14 +9,15 @@ import ExclamationMark from "@/components/ExclamationMark.vue";
 import { WarningLevel } from "@/components/WarningLevel";
 
 const licenseDetailsStore = useLicenseDetailsStore();
-const { endpoints } = storeToRefs(licenseDetailsStore);
+const { endpoints, validId, error: licenseDetailsError } = storeToRefs(licenseDetailsStore);
 </script>
 
 <template>
   <RouterLink :to="routeLinks.throughput.root">
     <FAIcon :icon="faFileLines" title="Usage" />
     <span class="navbar-label">Usage</span>
-    <ExclamationMark v-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
+    <ExclamationMark v-if="licenseDetailsError || !validId" :type="WarningLevel.Danger" />
+    <ExclamationMark v-else-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
   </RouterLink>
 </template>
 
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
index f52618e50e..fa6362ee71 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
@@ -7,16 +7,18 @@ import { computed } from "vue";
 import DataView from "@/components/DataView.vue";
 import ColumnHeader from "@/components/ColumnHeader.vue";
 import ExclamationMark from "@/components/ExclamationMark.vue";
-import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { faExternalLink, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { WarningLevel } from "@/components/WarningLevel";
 import useIsLicenseDetailsSupported, { minimumSCVersionForLicenseDetails } from "./isLicenseDetailsSupported";
 import ConditionalRender from "@/components/ConditionalRender.vue";
 import NoMetadata from "./NoMetadata.vue";
+import FAIcon from "@/components/FAIcon.vue";
+import UploadMetadata from "./UploadMetadata.vue";
 
 const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
 
 const licenseDetailsStore = useLicenseDetailsStore();
-const { endpoints, endpointSizes, hasLicenseDetails, error } = storeToRefs(licenseDetailsStore);
+const { endpoints, endpointSizes, serviceEndDate, validId, hasLicenseDetails, error } = storeToRefs(licenseDetailsStore);
 
 const sizes = computed(() =>
   endpoints.value.reduce(
@@ -54,7 +56,18 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
       <template #unsupported>
         <NoMetadata :metadataError="error" />
       </template>
-      <div class="box">
+      <template v-if="!validId">
+        <div class="id-warning alert alert-danger">
+          <span>The stored endpoint metadata file does not match the current license. Please download a new version from the Particular customer portal</span>
+          <button class="btn btn-primary">Customer Portal <FAIcon :icon="faExternalLink" /></button>
+        </div>
+        <UploadMetadata />
+      </template>
+      <div class="license-details box">
+        <div class="inline-info">
+          <h4>License Expiry Date</h4>
+          <span>{{ serviceEndDate?.toLocaleDateString() }}</span>
+        </div>
         <h3>Licensed Endpoints</h3>
         <div class="licensed-endpoints col-6">
           <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
@@ -81,6 +94,8 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
             </template>
           </DataView>
         </div>
+      </div>
+      <div>
         <div class="row mt-3">
           <div class="col-sm-12">
             <div class="nav tabs">
@@ -120,4 +135,33 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
   justify-content: space-between;
   align-items: center;
 }
+
+.license-details > div {
+  margin-bottom: 0.5rem;
+}
+
+.inline-info {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+}
+
+.inline-info * {
+  margin: 0;
+}
+
+.inline-info h3::after {
+  content: ":";
+}
+
+.id-warning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.id-warning button {
+  flex: 0;
+  white-space: nowrap;
+}
 </style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue b/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue
index c521f116a7..3477b0713f 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue
@@ -1,36 +1,9 @@
 <script setup lang="ts">
-import ActionButton from "@/components/ActionButton.vue";
 import CapabilityCard from "@/components/platformcapabilities/CapabilityCard.vue";
 import { Capability, CapabilityStatus } from "@/components/platformcapabilities/constants";
-import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
-import { computed, ref } from "vue";
+import UploadMetadata from "./UploadMetadata.vue";
 
 defineProps<{ metadataError?: string | null }>();
-
-const licenseDetailsStore = useLicenseDetailsStore();
-
-const file = ref<File>();
-const canUpload = computed(() => file.value);
-function enableUploadFile(event: Event) {
-  file.value = ((event.target as HTMLInputElement)?.files ?? [])[0];
-}
-
-const saving = ref(false);
-const uploadError = ref(false);
-async function handleSubmit() {
-  if (!file.value) return;
-
-  uploadError.value = false;
-  saving.value = true;
-  try {
-    await licenseDetailsStore.uploadEndpointMetadata(file.value);
-  } catch (e) {
-    console.error(e);
-    uploadError.value = true;
-  } finally {
-    saving.value = false;
-  }
-}
 </script>
 
 <template>
@@ -45,18 +18,7 @@ async function handleSubmit() {
       help-button-url="https://customers.particular.net"
       :allow-dismiss="false"
     />
-    <div class="box">
-      <span>Once you have an endpoint metadata file from Particular, upload it into ServiceControl here:</span>
-      <div class="alert alert-danger" role="alert" v-if="uploadError">Upload Failed!</div>
-      <form method="post" enctype="multipart/form-data" @submit.prevent="handleSubmit">
-        <div>
-          <input id="file-upload" type="file" class="form-control" accept=".plm" :onchange="enableUploadFile" :disabled="saving" />
-        </div>
-        <div class="mt-3">
-          <ActionButton class="btn btn-outline-secondary" type="submit" id="submit-upload-files" :loading="saving" :disabled="!canUpload">Upload File</ActionButton>
-        </div>
-      </form>
-    </div>
+    <UploadMetadata />
   </div>
 </template>
 
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue b/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue
new file mode 100644
index 0000000000..912d3203fd
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import ActionButton from "@/components/ActionButton.vue";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { computed, ref } from "vue";
+
+const licenseDetailsStore = useLicenseDetailsStore();
+
+const file = ref<File>();
+const canUpload = computed(() => file.value);
+function enableUploadFile(event: Event) {
+  file.value = ((event.target as HTMLInputElement)?.files ?? [])[0];
+}
+
+const saving = ref(false);
+const uploadError = ref(false);
+async function handleSubmit() {
+  if (!file.value) return;
+
+  uploadError.value = false;
+  saving.value = true;
+  try {
+    await licenseDetailsStore.uploadEndpointMetadata(file.value);
+  } catch (e) {
+    console.error(e);
+    uploadError.value = true;
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="box">
+    <span>Once you have an endpoint metadata file from Particular, upload it into ServiceControl here:</span>
+    <div class="alert alert-danger" role="alert" v-if="uploadError">Upload Failed!</div>
+    <form method="post" enctype="multipart/form-data" @submit.prevent="handleSubmit">
+      <div>
+        <input id="file-upload" type="file" class="form-control" accept=".plm" :onchange="enableUploadFile" :disabled="saving" />
+      </div>
+      <div class="mt-3">
+        <ActionButton variant="secondary" type="submit" id="submit-upload-files" :loading="saving" :disabled="!canUpload">Upload File</ActionButton>
+      </div>
+    </form>
+  </div>
+</template>

From f11a7d2b10420e90ab27878f203bd1bcb79dd2bf Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 17 Jul 2026 15:47:04 +0800
Subject: [PATCH 20/30] unify detail row (label: text) display

---
 src/Frontend/src/components/DetailsItem.vue   | 32 ++++++++
 .../configuration/PlatformLicense.vue         | 79 ++++++++++---------
 .../licenseDetails/EndpointDetails.vue        | 44 +++--------
 .../licenseDetails/LicenseDetails.vue         | 22 ++----
 4 files changed, 89 insertions(+), 88 deletions(-)
 create mode 100644 src/Frontend/src/components/DetailsItem.vue

diff --git a/src/Frontend/src/components/DetailsItem.vue b/src/Frontend/src/components/DetailsItem.vue
new file mode 100644
index 0000000000..25b29c5915
--- /dev/null
+++ b/src/Frontend/src/components/DetailsItem.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{ label: string; tooltip?: string }>();
+</script>
+
+<template>
+  <div class="details-item">
+    <label>{{ label }}</label>
+    <span :title="tooltip"><slot></slot></span>
+  </div>
+</template>
+
+<style scoped>
+.details-item {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+
+.details-item label {
+  font-weight: bold;
+  margin: 0;
+}
+
+.details-item label::after {
+  content: ":";
+}
+
+.details-item span {
+  padding: 0.375rem 0;
+}
+</style>
diff --git a/src/Frontend/src/components/configuration/PlatformLicense.vue b/src/Frontend/src/components/configuration/PlatformLicense.vue
index 6ff30fb838..497dfccca0 100644
--- a/src/Frontend/src/components/configuration/PlatformLicense.vue
+++ b/src/Frontend/src/components/configuration/PlatformLicense.vue
@@ -11,6 +11,7 @@ import { useLicenseStore } from "@/stores/LicenseStore";
 import LoadingSpinner from "../LoadingSpinner.vue";
 import ColumnHeader from "../ColumnHeader.vue";
 import DataView from "../DataView.vue";
+import DetailsItem from "../DetailsItem.vue";
 
 const configurationStore = useConfigurationStore();
 const { configuration } = storeToRefs(configurationStore);
@@ -29,13 +30,9 @@ const { licenseStatus, license } = licenseStore;
           <div class="box">
             <div class="row">
               <div class="license-info">
-                <div>
-                  <b>Platform license type:</b> <span role="note" aria-label="license-type">{{ typeText(license, configuration) }}{{ licenseEdition }}</span>
-                </div>
-
+                <DetailsItem label="Platform License Type"> {{ typeText(license, configuration) }}{{ licenseEdition }} </DetailsItem>
                 <template v-if="licenseStatus.isSubscriptionLicense">
-                  <div>
-                    <b>License expiry date: </b>
+                  <DetailsItem label="License Expiry Date">
                     <span
                       role="note"
                       aria-label="license-expiry-date"
@@ -47,12 +44,11 @@ const { licenseStatus, license } = licenseStore;
                       <span role="note" aria-label="license-days-left">{{ licenseStatus.subscriptionDaysLeft }}</span>
                       <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
                     </span>
-                    <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isPlatformExpired">Your license expired. Please update the license to continue using the Particular Service Platform.</div>
-                  </div>
+                  </DetailsItem>
+                  <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isPlatformExpired">Your license expired. Please update the license to continue using the Particular Service Platform.</div>
                 </template>
                 <template v-if="licenseStatus.isTrialLicense">
-                  <div>
-                    <b>License expiry date: </b>
+                  <DetailsItem label="License Expiry Date">
                     <span
                       role="note"
                       aria-label="license-expiry-date"
@@ -64,41 +60,35 @@ const { licenseStatus, license } = licenseStore;
                       <span role="note" aria-label="license-days-left"> {{ licenseStatus.trialDaysLeft }}</span>
                       <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
                     </span>
-                    <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isPlatformTrialExpired">
-                      Your license expired. To continue using the Particular Service Platform you'll need to extend your license.
-                    </div>
-                    <div class="license-page-extend-trial" v-if="licenseStatus.isPlatformTrialExpiring && licenseStatus.isPlatformTrialExpired">
-                      <a class="btn btn-default btn-primary" :href="license.license_extension_url" target="_blank">Extend your license <FAIcon :icon="faExternalLink" /></a>
-                    </div>
+                  </DetailsItem>
+                  <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isPlatformTrialExpired">Your license expired. To continue using the Particular Service Platform you'll need to extend your license.</div>
+                  <div class="license-page-extend-trial" v-if="licenseStatus.isPlatformTrialExpiring && licenseStatus.isPlatformTrialExpired">
+                    <a class="btn btn-default btn-primary" :href="license.license_extension_url" target="_blank">Extend your license <FAIcon :icon="faExternalLink" /></a>
                   </div>
                 </template>
                 <template v-if="licenseStatus.isUpgradeProtectionLicense">
-                  <div>
-                    <span>
-                      <b>Upgrade protection expiry date:</b>
-                      <span
-                        role="note"
-                        aria-label="license-expiry-date"
-                        :class="{
-                          'license-expired': licenseStatus.isInvalidDueToUpgradeProtectionExpired,
-                        }"
-                      >
-                        {{ formattedUpgradeProtectionExpiration }}
-                        <span role="note" aria-label="license-days-left">{{ licenseStatus.upgradeDaysLeft }}</span>
-                        <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
-                      </span>
+                  <DetailsItem label="Upgrade Protection Expiry Date">
+                    <span
+                      role="note"
+                      aria-label="license-expiry-date"
+                      :class="{
+                        'license-expired': licenseStatus.isInvalidDueToUpgradeProtectionExpired,
+                      }"
+                    >
+                      {{ formattedUpgradeProtectionExpiration }}
+                      <span role="note" aria-label="license-days-left">{{ licenseStatus.upgradeDaysLeft }}</span>
+                      <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
                     </span>
-                    <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isValidWithExpiredUpgradeProtection || licenseStatus.isValidWithExpiringUpgradeProtection">
-                      <b>Warning:</b> Once upgrade protection expires, you'll no longer have access to support or new product versions.
-                    </div>
-                    <div class="license-expired-text" v-if="licenseStatus.isInvalidDueToUpgradeProtectionExpired">Your license upgrade protection expired before this version of ServicePulse was released.</div>
+                  </DetailsItem>
+                  <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isValidWithExpiredUpgradeProtection || licenseStatus.isValidWithExpiringUpgradeProtection">
+                    <b>Warning:</b> Once upgrade protection expires, you'll no longer have access to support or new product versions.
                   </div>
+                  <div class="license-expired-text" v-if="licenseStatus.isInvalidDueToUpgradeProtectionExpired">Your license upgrade protection expired before this version of ServicePulse was released.</div>
                 </template>
-                <div>
-                  <b>ServiceControl instance:</b>
+                <DetailsItem label="ServiceControl Instance">
                   {{ formattedInstanceName }}
-                </div>
-                <ul class="license-install-info">
+                </DetailsItem>
+                <ul class="license-install-info mt-2">
                   <li>
                     <a href="https://docs.particular.net/servicecontrol/license" target="_blank">Install or update a ServiceControl license</a>
                   </li>
@@ -143,7 +133,7 @@ const { licenseStatus, license } = licenseStore;
 <style scoped>
 .license-info {
   font-size: 16px;
-  line-height: 3em;
+  max-width: 35em;
 }
 
 .license-install-info li {
@@ -171,4 +161,15 @@ const { licenseStatus, license } = licenseStore;
 .licensed-endpoints span {
   padding: 10px;
 }
+
+.license-expired {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.license-expired-text {
+  overflow: visible;
+  white-space: nowrap;
+}
 </style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
index b5b5734b9d..2d427b0b30 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
@@ -4,6 +4,7 @@ import QueueData from "./QueueData.vue";
 import { computed } from "vue";
 import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary.ts";
 import ThroughputGraph from "../queues/ThroughputGraph.vue";
+import DetailsItem from "@/components/DetailsItem.vue";
 
 const props = defineProps<{ endpoint: Endpoint }>();
 
@@ -26,18 +27,15 @@ const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q
 <template>
   <div class="card-body" :key="endpoint.clientId">
     <div class="details">
-      <div class="details-item">
-        <label>Average Throughput/Month</label>
-        <span>{{ endpoint.totalMonthlyThroughput.toLocaleString() }}</span>
-      </div>
-      <div class="details-item" v-if="endpoint.classification === EndpointClassification.Full">
-        <label>Current Size</label>
-        <span :title="endpoint.currentSize.throughputText">{{ endpoint.currentSize.name }}</span>
-      </div>
-      <div class="details-item">
-        <label>Licensed Size</label>
-        <span :title="endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.throughputText : undefined">{{ endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.name : "Send Only" }}</span>
-      </div>
+      <DetailsItem label="Average Throughput/Month">
+        {{ endpoint.totalMonthlyThroughput.toLocaleString() }}
+      </DetailsItem>
+      <DetailsItem v-if="endpoint.classification === EndpointClassification.Full" label="Current Size" :tooltip="endpoint.currentSize.throughputText">
+        {{ endpoint.currentSize.name }}
+      </DetailsItem>
+      <DetailsItem label="Licensed Size" :tooltip="endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.throughputText : undefined">
+        {{ endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.name : "Send Only" }}
+      </DetailsItem>
     </div>
     <ThroughputGraph :data="throughputByMonth" class="graph" v-if="throughputByMonth.length" />
     <div class="queue-data">
@@ -58,7 +56,7 @@ const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q
   display: flex;
   flex-direction: column;
   flex: 1;
-  max-width: 25em;
+  max-width: 28em;
 }
 
 .graph {
@@ -69,24 +67,4 @@ const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q
 .queue-data {
   flex-basis: 100%;
 }
-
-.details-item {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: 1fr 0.75fr;
-  align-items: center;
-}
-
-.details-item label {
-  font-weight: bold;
-  margin: 0;
-}
-
-.details-item label::after {
-  content: ":";
-}
-
-.details-item span {
-  padding: 0.375rem 0;
-}
 </style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
index fa6362ee71..bf425a3463 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
@@ -14,6 +14,7 @@ import ConditionalRender from "@/components/ConditionalRender.vue";
 import NoMetadata from "./NoMetadata.vue";
 import FAIcon from "@/components/FAIcon.vue";
 import UploadMetadata from "./UploadMetadata.vue";
+import DetailsItem from "@/components/DetailsItem.vue";
 
 const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
 
@@ -64,10 +65,9 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
         <UploadMetadata />
       </template>
       <div class="license-details box">
-        <div class="inline-info">
-          <h4>License Expiry Date</h4>
-          <span>{{ serviceEndDate?.toLocaleDateString() }}</span>
-        </div>
+        <DetailsItem label="License Expiry Date" class="license-expiry">
+          {{ serviceEndDate?.toLocaleDateString() }}
+        </DetailsItem>
         <h3>Licensed Endpoints</h3>
         <div class="licensed-endpoints col-6">
           <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
@@ -140,18 +140,8 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
   margin-bottom: 0.5rem;
 }
 
-.inline-info {
-  display: flex;
-  gap: 1em;
-  align-items: center;
-}
-
-.inline-info * {
-  margin: 0;
-}
-
-.inline-info h3::after {
-  content: ":";
+.license-expiry {
+  max-width: 22em;
 }
 
 .id-warning {

From f1dcabd9288738b346c4a6665b33cb8585237a8f Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 20 Jul 2026 08:59:28 +0800
Subject: [PATCH 21/30] onyl show license details tab when it's possible to be
 supported

---
 src/Frontend/src/stores/LicenseDetailsStore.ts         |  6 ++++--
 .../src/views/throughputreport/EndpointsView.vue       | 10 ++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/Frontend/src/stores/LicenseDetailsStore.ts b/src/Frontend/src/stores/LicenseDetailsStore.ts
index 22d69b4bb1..6fd643b468 100644
--- a/src/Frontend/src/stores/LicenseDetailsStore.ts
+++ b/src/Frontend/src/stores/LicenseDetailsStore.ts
@@ -8,16 +8,19 @@ import type { LicensedEndpointDetails } from "@/resources/LicenseDetails";
 import useIsLicenseDetailsSupported from "@/views/throughputreport/licenseDetails/isLicenseDetailsSupported";
 
 export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
+  const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
+
   const endpointSizes = ref<EndpointSize[]>([]);
   const endpoints = ref<Endpoint[]>([]);
   const infrastructureQueues = ref<Queue[]>([]);
   const excludedQueues = ref<Queue[]>([]);
   const serviceEndDate = ref<Date>();
-  const validId = ref<boolean>(false);
+  const validId = ref<boolean>(true);
   const hasLicenseDetails = ref(false);
   const error = ref<string | null>();
 
   async function refresh() {
+    if (!isLicenseDetailsSupported) return;
     try {
       error.value = null;
       const [, data] = await serviceControlClient.fetchTypedFromServiceControl<LicensedEndpointDetails>("license/details");
@@ -57,7 +60,6 @@ export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
     await refresh();
   }
 
-  const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
   watch(isLicenseDetailsSupported, (supported: boolean) => supported && refresh());
 
   return {
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index a18d293d03..96171e2bf0 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -3,7 +3,7 @@ import routeLinks from "@/router/routeLinks";
 import isRouteSelected from "@/composables/isRouteSelected";
 import { UserIndicator } from "@/views/throughputreport/queues/userIndicator.ts";
 import { userIndicatorMapper } from "@/views/throughputreport/queues/userIndicatorMapper.ts";
-import { ref, type Component } from "vue";
+import { computed, ref, type Component } from "vue";
 import { storeToRefs } from "pinia";
 import LegendNServiceBusEndpoint from "./LegendNServiceBusEndpoint.vue";
 import LegendNServiceBusEndpointNoLongerInUse from "./LegendNServiceBusEndpointNoLongerInUse.vue";
@@ -17,13 +17,15 @@ import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoR
 import ExclamationMark from "@/components/ExclamationMark.vue";
 import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore.ts";
 import { WarningLevel } from "@/components/WarningLevel.ts";
-import useIsLicenseDetailsSupported from "./licenseDetails/isLicenseDetailsSupported.ts";
+import { useLicenseStore } from "@/stores/LicenseStore.ts";
 
 const { store } = useThroughputStoreAutoRefresh();
 const { isBrokerTransport } = storeToRefs(store);
 const licenseDetailsStore = useLicenseDetailsStore();
 const { endpoints, validId, error: licenseDetailsError } = storeToRefs(licenseDetailsStore);
-const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
+const licenseStore = useLicenseStore();
+const { license } = storeToRefs(licenseStore);
+const enableLicenseDetails = computed(() => license.value.edition === "Endpoint Size");
 
 const showLegend = ref(false);
 
@@ -53,7 +55,7 @@ function toggleOptionsLegendVisible() {
         <h5 v-if="isBrokerTransport" class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedBrokerQueues.link) }">
           <RouterLink :to="routeLinks.throughput.queues.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
         </h5>
-        <h5 class="nav-item" v-if="isLicenseDetailsSupported" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
+        <h5 class="nav-item" v-if="enableLicenseDetails" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
           <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">
             <span>License Details</span>
             <ExclamationMark v-if="licenseDetailsError || !validId" :type="WarningLevel.Danger" />

From 6494b8b8a1e43be0015976319a590bc71af634aa Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 20 Jul 2026 09:03:46 +0800
Subject: [PATCH 22/30] fix license edition check

---
 .../src/views/throughputreport/queues/DetectedListView.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
index b9deb20aa2..bcfd01c6e9 100644
--- a/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
@@ -77,7 +77,7 @@ const filteredData = computed(() => {
 });
 // We can remove this hidden toggle once we have new edition licenses.
 const hiddenFeatureToggle = useHiddenFeature(["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "m"]);
-const showMonthly = computed(() => license.edition === "MonthlyUsage" || hiddenFeatureToggle.value);
+const showMonthly = computed(() => license.edition === "Endpoint Size" || hiddenFeatureToggle.value);
 
 const throughputClient = createThroughputClient();
 

From d085215c15b04ed1576feef44af90b8b4c1ec073 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 20 Jul 2026 13:22:12 +0800
Subject: [PATCH 23/30] fix tests

---
 src/Frontend/src/components/DetailsItem.vue                 | 4 ++--
 .../src/components/configuration/PlatformLicense.vue        | 2 +-
 .../src/views/throughputreport/EndpointsView.spec.ts        | 6 +++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/components/DetailsItem.vue b/src/Frontend/src/components/DetailsItem.vue
index 25b29c5915..a27f8aaab6 100644
--- a/src/Frontend/src/components/DetailsItem.vue
+++ b/src/Frontend/src/components/DetailsItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-defineProps<{ label: string; tooltip?: string }>();
+defineProps<{ label: string; tooltip?: string; ariaLabel?: string }>();
 </script>
 
 <template>
   <div class="details-item">
     <label>{{ label }}</label>
-    <span :title="tooltip"><slot></slot></span>
+    <span role="note" :title="tooltip" :aria-label="ariaLabel"><slot></slot></span>
   </div>
 </template>
 
diff --git a/src/Frontend/src/components/configuration/PlatformLicense.vue b/src/Frontend/src/components/configuration/PlatformLicense.vue
index 497dfccca0..e45ba21f93 100644
--- a/src/Frontend/src/components/configuration/PlatformLicense.vue
+++ b/src/Frontend/src/components/configuration/PlatformLicense.vue
@@ -30,7 +30,7 @@ const { licenseStatus, license } = licenseStore;
           <div class="box">
             <div class="row">
               <div class="license-info">
-                <DetailsItem label="Platform License Type"> {{ typeText(license, configuration) }}{{ licenseEdition }} </DetailsItem>
+                <DetailsItem label="Platform License Type" aria-label="license-type"> {{ typeText(license, configuration) }}{{ licenseEdition }} </DetailsItem>
                 <template v-if="licenseStatus.isSubscriptionLicense">
                   <DetailsItem label="License Expiry Date">
                     <span
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts b/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
index 647a85b200..650a1ca0b5 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import * as precondition from "../../../test/preconditions";
 import { createTestingPinia } from "@pinia/testing";
 import { Transport } from "@/views/throughputreport/transport";
@@ -28,6 +28,10 @@ describe("EndpointsView tests", () => {
     const driver = await setup(transport);
     await preSetup(driver);
 
+    vi.mock("@/composables/isRouteSelected.ts", () => ({
+      default: vi.fn(() => true),
+    }));
+
     const { debug } = render(EndpointsView, {
       global: {
         stubs: {

From 5b59c2fad288a8ce2f1535ed4785e3b301c6fe50 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 20 Jul 2026 13:22:33 +0800
Subject: [PATCH 24/30] update local anchor to button for visibility

---
 src/Frontend/src/views/throughputreport/EndpointsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index 96171e2bf0..f961ba5301 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -71,7 +71,7 @@ function toggleOptionsLegendVisible() {
         Set an Endpoint Type for all detected endpoint and broker queues with the most appropriate option.<br />
         Use the filters to bulk set the Endpoint Types on similar named endpoints/queues.<br />
         If the names of the endpoints/queues contain confidential or proprietary information, make sure you set up <RouterLink :to="routeLinks.throughput.setup.mask.link">masking in Configuration</RouterLink>.<br />
-        <a href="#" :aria-label="`${showLegend ? 'Hide' : 'Show'} Endpoint Types meaning`" @click.prevent="toggleOptionsLegendVisible()">{{ showLegend ? "Hide" : "Show" }} Endpoint Types meaning.</a>
+        <button class="btn btn-secondary" :aria-label="`${showLegend ? 'Hide' : 'Show'} Endpoint Types meaning`" @click.prevent="toggleOptionsLegendVisible()">{{ showLegend ? "Hide" : "Show" }} Endpoint Types meaning.</button>
       </p>
       <div v-show="showLegend" class="alert alert-info">
         <div v-for="[key, LegendComponent] in legendOptions" :key="key">

From 31df3a039c9fc62ec71e0aa21197a36b1bf9ff79 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 20 Jul 2026 13:26:39 +0800
Subject: [PATCH 25/30] update button styles to fit designspace better

---
 .../throughputreport/licenseDetails/LicensedEndpointsView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
index 04fce708ee..80d876ca14 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -22,8 +22,8 @@ const expandedLength = computed(() => [...expandedEndpoints.values()].filter((va
         <div :key="pageNumber">
           <div class="actions mb-2">
             <div class="backdrop"></div>
-            <button type="button" class="btn btn-default" :disabled="expandedLength === pageData.length" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, true))">Expand All</button>
-            <button type="button" class="btn btn-default" :disabled="expandedLength === 0" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, false))">Collapse All</button>
+            <button type="button" class="btn btn-secondary" :disabled="expandedLength === pageData.length" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, true))">Expand All</button>
+            <button type="button" class="btn btn-secondary" :disabled="expandedLength === 0" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, false))">Collapse All</button>
           </div>
           <div class="card mb-3" v-for="endpoint in pageData">
             <template v-if="expandedEndpoints.get(endpoint)">

From 42206bc5b4fe75ad1bdece5dbcdc47256fbf7841 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 21 Jul 2026 07:31:25 +0800
Subject: [PATCH 26/30] set actual page sizes

---
 src/Frontend/src/components/DetailsItem.vue                     | 1 +
 .../throughputreport/licenseDetails/LicensedEndpointsView.vue   | 2 +-
 .../src/views/throughputreport/licenseDetails/QueueData.vue     | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/components/DetailsItem.vue b/src/Frontend/src/components/DetailsItem.vue
index a27f8aaab6..ab6b6f3742 100644
--- a/src/Frontend/src/components/DetailsItem.vue
+++ b/src/Frontend/src/components/DetailsItem.vue
@@ -5,6 +5,7 @@ defineProps<{ label: string; tooltip?: string; ariaLabel?: string }>();
 <template>
   <div class="details-item">
     <label>{{ label }}</label>
+    <!-- role and aria-label are used for tests -->
     <span role="note" :title="tooltip" :aria-label="ariaLabel"><slot></slot></span>
   </div>
 </template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
index 80d876ca14..8fb179187d 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -16,7 +16,7 @@ const expandedLength = computed(() => [...expandedEndpoints.values()].filter((va
 
 <template>
   <div class="mt-2">
-    <DataView :data="endpoints" :items-per-page="5" @page-changed="expandedEndpoints.clear()" sticky-pagination>
+    <DataView :data="endpoints" :items-per-page="100" @page-changed="expandedEndpoints.clear()" sticky-pagination>
       <template #data="{ pageData, pageNumber }">
         <!--parent div with key ensures that any state for the details below is reset on page change-->
         <div :key="pageNumber">
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
index a4ee35763f..25db41ec89 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <DataView v-if="queues" :data="queues" :items-per-page="4">
+  <DataView v-if="queues" :data="queues" :items-per-page="100">
     <template #data="{ pageData }">
       <table class="table">
         <thead>

From cc1993d91ff0e7a469109388f081d45e6ecd75f6 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Tue, 21 Jul 2026 14:37:04 +0800
Subject: [PATCH 27/30] potential link off to pricing estimate

---
 .../licenseDetails/LicenseDetails.vue         | 71 +++++++++++--------
 1 file changed, 42 insertions(+), 29 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
index bf425a3463..7f04468a89 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
@@ -37,6 +37,7 @@ const sizes = computed(() =>
 const licensedCounts = computed(() => sizes.value.licensed);
 const currentCounts = computed(() => sizes.value.current);
 const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...currentCounts.value.keys()])].sort((a, b) => endpointSizes.value.findIndex((size) => size.name === a) - endpointSizes.value.findIndex((size) => size.name === b)));
+const estimateUrlParams = computed(() => [...currentCounts.value.entries().map(([endpointSize, count]) => `${endpointSize}=${count}`)].join("&"));
 </script>
 
 <template>
@@ -60,39 +61,45 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
       <template v-if="!validId">
         <div class="id-warning alert alert-danger">
           <span>The stored endpoint metadata file does not match the current license. Please download a new version from the Particular customer portal</span>
-          <button class="btn btn-primary">Customer Portal <FAIcon :icon="faExternalLink" /></button>
+          <a href="https://customers.particular.net" class="btn btn-primary" target="_blank">Customer Portal <FAIcon :icon="faExternalLink" /></a>
         </div>
         <UploadMetadata />
       </template>
       <div class="license-details box">
-        <DetailsItem label="License Expiry Date" class="license-expiry">
-          {{ serviceEndDate?.toLocaleDateString() }}
-        </DetailsItem>
-        <h3>Licensed Endpoints</h3>
-        <div class="licensed-endpoints col-6">
-          <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
-            <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-8" />
-            <ColumnHeader name="Licensed" label="Licensed" class="col-2" />
-            <ColumnHeader name="Used" label="Used" class="col-2" />
-          </div>
-          <DataView :data="allSizes">
-            <template #data="{ pageData }">
-              <div role="rowgroup" aria-label="endpoints">
-                <div role="row" class="row grid-row" v-for="size in pageData" :key="size">
-                  <span class="col-8" :title="endpointSizes.find((eps) => eps.name === size)?.throughputText">
-                    {{ size }}
-                  </span>
-                  <span class="col-2">
-                    {{ (licensedCounts.get(size) ?? 0).toLocaleString() }}
-                  </span>
-                  <span class="col-2 current-size">
-                    {{ (currentCounts.get(size) ?? 0).toLocaleString() }}
-                    <ExclamationMark v-if="(licensedCounts.get(size) ?? 0) !== (currentCounts.get(size) ?? 0)" :icon="faWarning" :type="WarningLevel.Warning" />
-                  </span>
+        <div class="details col-6">
+          <DetailsItem label="License Expiry Date" class="license-expiry">
+            {{ serviceEndDate?.toLocaleDateString() }}
+          </DetailsItem>
+          <h3>Licensed Endpoints</h3>
+          <div class="licensed-endpoints">
+            <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
+              <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-8" />
+              <ColumnHeader name="Licensed" label="Licensed" class="col-2" />
+              <ColumnHeader name="Used" label="Used" class="col-2" />
+            </div>
+            <DataView :data="allSizes">
+              <template #data="{ pageData }">
+                <div role="rowgroup" aria-label="endpoints">
+                  <div role="row" class="row grid-row" v-for="size in pageData" :key="size">
+                    <span class="col-8" :title="endpointSizes.find((eps) => eps.name === size)?.throughputText">
+                      {{ size }}
+                    </span>
+                    <span class="col-2">
+                      {{ (licensedCounts.get(size) ?? 0).toLocaleString() }}
+                    </span>
+                    <span class="col-2 current-size">
+                      {{ (currentCounts.get(size) ?? 0).toLocaleString() }}
+                      <ExclamationMark v-if="(licensedCounts.get(size) ?? 0) !== (currentCounts.get(size) ?? 0)" :icon="faWarning" :type="WarningLevel.Warning" />
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </template>
-          </DataView>
+              </template>
+            </DataView>
+          </div>
+        </div>
+        <!-- awaiting update to the pricing page to support this functionality -->
+        <div v-if="false">
+          <a :href="`https://particular.net/pricing?${estimateUrlParams}`" class="btn btn-primary" target="_blank">Estimate Renewal Price <FAIcon :icon="faExternalLink" /></a>
         </div>
       </div>
       <div>
@@ -136,7 +143,13 @@ const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...
   align-items: center;
 }
 
-.license-details > div {
+.license-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.license-details .details > div {
   margin-bottom: 0.5rem;
 }
 

From f4660f514e6a7ec3ba31ac51cf98886e37aaa3df Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Wed, 22 Jul 2026 09:24:49 +0800
Subject: [PATCH 28/30] make linter happy

---
 .../src/components/serviceControlClient.ts    |  1 +
 src/Frontend/src/resources/LicenseDetails.ts  | 21 +++---
 .../src/stores/LicenseDetailsStore.ts         | 10 +--
 .../licenseDetails/CollapsedEndpoint.vue      |  2 +
 .../licenseDetails/EndpointData.vue           | 66 -------------------
 .../licenseDetails/EndpointHeader.vue         | 31 ++-------
 .../licenseDetails/LicensedEndpointsView.vue  |  2 +-
 .../licenseDetails/QueueData.vue              |  6 +-
 8 files changed, 29 insertions(+), 110 deletions(-)
 delete mode 100644 src/Frontend/src/views/throughputreport/licenseDetails/EndpointData.vue

diff --git a/src/Frontend/src/components/serviceControlClient.ts b/src/Frontend/src/components/serviceControlClient.ts
index 7b29412839..774289b81d 100644
--- a/src/Frontend/src/components/serviceControlClient.ts
+++ b/src/Frontend/src/components/serviceControlClient.ts
@@ -43,6 +43,7 @@ class ServiceControlClient {
         try {
           const errorResponse = await response.json();
           error = new Error(errorResponse.detail ?? errorResponse.title);
+          // eslint-disable-next-line no-empty
         } catch {}
       }
       throw error;
diff --git a/src/Frontend/src/resources/LicenseDetails.ts b/src/Frontend/src/resources/LicenseDetails.ts
index f24b6c2353..682c536688 100644
--- a/src/Frontend/src/resources/LicenseDetails.ts
+++ b/src/Frontend/src/resources/LicenseDetails.ts
@@ -1,22 +1,27 @@
 import type QueueThroughputSummary from "@/resources/QueueThroughputSummary";
 
 export interface LicensedEndpointDetails {
-  endpoints: LicensedEndpoint[];
-  infrastructure_queues: Queue[];
-  excluded_queues: Queue[];
+  endpoints: ApiEndpoint[];
+  infrastructure_queues: ApiQueue[];
+  excluded_queues: ApiQueue[];
   service_end_date: string;
-  products: Product[];
+  products: ApiProduct[];
   valid_id: boolean;
 }
 
-interface LicensedEndpoint {
+export interface ApiEndpoint {
   name: string;
   classification: EndpointClassification;
-  endpointSize: string;
-  queues: Queue[];
+  endpoint_size: string;
+  queues: ApiQueue[];
 }
 
-interface Product {
+export interface ApiQueue {
+  name_hash: string;
+  scope: string;
+}
+
+interface ApiProduct {
   product_code: string;
   monthly_throughput: number | null;
 }
diff --git a/src/Frontend/src/stores/LicenseDetailsStore.ts b/src/Frontend/src/stores/LicenseDetailsStore.ts
index 6fd643b468..3c5b19a21e 100644
--- a/src/Frontend/src/stores/LicenseDetailsStore.ts
+++ b/src/Frontend/src/stores/LicenseDetailsStore.ts
@@ -2,9 +2,8 @@ import { acceptHMRUpdate, defineStore } from "pinia";
 import logger from "@/logger";
 import { ref, watch } from "vue";
 import createThroughputClient from "@/views/throughputreport/throughputClient";
-import { Endpoint, EndpointSize, type Queue } from "@/resources/LicenseDetails";
+import { Endpoint, EndpointSize, type Queue, type LicensedEndpointDetails, type ApiQueue } from "@/resources/LicenseDetails";
 import serviceControlClient from "@/components/serviceControlClient";
-import type { LicensedEndpointDetails } from "@/resources/LicenseDetails";
 import useIsLicenseDetailsSupported from "@/views/throughputreport/licenseDetails/isLicenseDetailsSupported";
 
 export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
@@ -30,9 +29,9 @@ export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
       const throughputClient = createThroughputClient();
       const scQueues = await throughputClient.queues();
 
-      const toQueue = (metaQ: any) =>
+      const toQueue = (metaQ: ApiQueue) =>
         ({
-          nameHash: metaQ.nameHash,
+          nameHash: metaQ.name_hash,
           scope: metaQ.scope,
           details: scQueues.find((scQ) => scQ.name_hash === metaQ.name_hash),
         }) as Queue;
@@ -40,11 +39,12 @@ export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
       const sortedProducts = data.products.toSorted((p1, p2) => (p1.monthly_throughput ?? Number.MAX_VALUE) - (p2.monthly_throughput ?? Number.MAX_VALUE));
       const sortedEndpointSizes = sortedProducts.map((product, i) => new EndpointSize(product.product_code, i > 0 ? (sortedProducts[i - 1].monthly_throughput ?? 0) : 0, product.monthly_throughput));
       endpointSizes.value = sortedEndpointSizes;
-      endpoints.value = data.endpoints.map((metaEp: any) => new Endpoint(crypto.randomUUID(), metaEp.name, metaEp.queues.map(toQueue), metaEp.classification, sortedEndpointSizes.find((es) => es.name === metaEp.endpoint_size)!, sortedEndpointSizes));
+      endpoints.value = data.endpoints.map((metaEp) => new Endpoint(crypto.randomUUID(), metaEp.name, metaEp.queues.map(toQueue), metaEp.classification, sortedEndpointSizes.find((es) => es.name === metaEp.endpoint_size)!, sortedEndpointSizes));
       infrastructureQueues.value = data.infrastructure_queues.map(toQueue);
       excludedQueues.value = data.excluded_queues.map(toQueue);
       serviceEndDate.value = new Date(data.service_end_date);
       validId.value = data.valid_id;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       error.value = `Error fetching endpoint metadata: ${err.message ?? err}`;
       logger.error("Error fetching endpoint metadata", err);
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
index 52c42fc3af..0c52ae264e 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
@@ -13,6 +13,8 @@ const endpointClassificationStyle = computed(() => {
       return props.endpoint.isInBreach ? "--breach" : "--full";
     case EndpointClassification.SendOnly:
       return "--send-only";
+    default:
+      throw new Error("Invalid endpoint classification");
   }
 });
 </script>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointData.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointData.vue
deleted file mode 100644
index 1aa27811fe..0000000000
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointData.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import EndpointDetails from "./EndpointDetails.vue";
-import EndpointHeader from "./EndpointHeader.vue";
-import CollapsedEndpoint from "./CollapsedEndpoint.vue";
-import PageControl from "./components/PageControl.vue";
-import { setEndpointElementReference } from "./model/tabModel.ts";
-import useEndpointListModel from "./model/endpointListModel.ts";
-
-const collapsedEndpoints = ref(new Map());
-const endpointPageModel = useEndpointListModel();
-const { pageItems } = endpointPageModel;
-</script>
-
-<template>
-  <div class="actions mb-2">
-    <div class="backdrop"></div>
-    <PageControl v-model="endpointPageModel" @page-changed="collapsedEndpoints.clear()" :item-desc="(endpoint) => endpoint.name" class="pages" />
-    <button type="button" class="btn btn-primary" @click="pageItems.forEach((endpoint) => collapsedEndpoints.set(endpoint, true))">Collapse All</button>
-  </div>
-  <div class="card mb-3" v-for="endpoint in pageItems" :ref="(el) => setEndpointElementReference(endpoint, el)">
-    <CollapsedEndpoint class="card-header" v-if="collapsedEndpoints.get(endpoint)" :endpoint="endpoint" @expand="collapsedEndpoints.set(endpoint, false)" />
-    <template v-else>
-      <EndpointHeader :endpoint="endpoint" class="card-header" @collapse="collapsedEndpoints.set(endpoint, true)" />
-      <EndpointDetails :endpoint="endpoint" />
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.card {
-  margin-left: 0.5em;
-  box-shadow:
-    0px 0.1px 0.4px hsl(var(--shadow-color) / 0.34),
-    0px 0.1px 0.4px 0.7px hsl(var(--shadow-color) / 0.3),
-    0px 0.4px 1.2px 1.4px hsl(var(--shadow-color) / 0.25),
-    0px 1px 3px 2.1px hsl(var(--shadow-color) / 0.21),
-    0px 2.3px 7px 2.9px hsl(var(--shadow-color) / 0.17),
-    0px 4.3px 13.2px 3.6px hsl(var(--shadow-color) / 0.13),
-    0px 7.3px 22.4px 4.3px hsl(var(--shadow-color) / 0.09),
-    0px 11.6px 35.6px 5px hsl(var(--shadow-color) / 0.04);
-}
-
-.actions {
-  display: flex;
-  gap: 0.25rem;
-  justify-content: space-between;
-  align-items: end;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.actions .backdrop {
-  position: absolute;
-  inset: 0;
-  backdrop-filter: blur(16px);
-  z-index: -1;
-}
-
-.pages {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-}
-</style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
index ddf5520beb..a42df05792 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useTemplateRef, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { EndpointClassification, type Endpoint } from "@/resources/LicenseDetails";
 import FAIcon from "@/components/FAIcon.vue";
 import { faCircleChevronUp } from "@fortawesome/free-solid-svg-icons";
@@ -13,17 +13,12 @@ const endpointClassificationStyle = computed(() => {
       return props.endpoint.isInBreach ? "--breach" : "--full";
     case EndpointClassification.SendOnly:
       return "--send-only";
+    default:
+      throw new Error("Invalid endpoint classification");
   }
 });
 
 const endpointName = ref(props.endpoint.name);
-const isValid = computed(() => endpointName.value?.length > 0 && endpointName.value?.length <= 80);
-const saveButton = useTemplateRef("save");
-const nameEdit = useTemplateRef("nameEdit");
-
-function saveName() {
-  if (isValid.value) props.endpoint.name = endpointName.value;
-}
 
 watch(
   () => props.endpoint.name,
@@ -37,25 +32,7 @@ watch(
       <FAIcon :icon="faCircleChevronUp" class="collapse-button" size="lg" tabindex="0" title="collapse" @click="emit('collapse')" />
       <strong :title="endpoint.name">{{ endpoint.name }}</strong>
     </div>
-    <div class="header-buttons d-print-none">
-      <!-- <ModalButton
-        class="btn btn-secondary"
-        :id="`editEndpointName${endpoint.clientId}`"
-        modal-title="Edit Endpoint Name"
-        @[`hidden.bs.modal`]="endpointName = endpoint.name"
-        @[`shown.bs.modal`]="nameEdit.focus()"
-      >
-        Edit Name
-        <template #modalBody>
-          <TextEdit ref="nameEdit" :maxlength="80" v-model="endpointName" @accept="saveButton.click()" />
-        </template>
-        <template #modalFooter>
-          <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button ref="save" class="btn btn-primary" data-bs-dismiss="modal" @click="saveName" :disabled="!isValid">Save</button>
-        </template>
-      </ModalButton>
-      <RemoveEndpoint :endpoint="endpoint" /> -->
-    </div>
+    <div class="header-buttons d-print-none"></div>
   </div>
 </template>
 
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
index 8fb179187d..b3cccabdc5 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -25,7 +25,7 @@ const expandedLength = computed(() => [...expandedEndpoints.values()].filter((va
             <button type="button" class="btn btn-secondary" :disabled="expandedLength === pageData.length" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, true))">Expand All</button>
             <button type="button" class="btn btn-secondary" :disabled="expandedLength === 0" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, false))">Collapse All</button>
           </div>
-          <div class="card mb-3" v-for="endpoint in pageData">
+          <div class="card mb-3" v-for="endpoint in pageData" :key="endpoint.clientId">
             <template v-if="expandedEndpoints.get(endpoint)">
               <EndpointHeader :endpoint="endpoint" class="card-header" @collapse="expandedEndpoints.set(endpoint, false)" />
               <EndpointDetails :endpoint="endpoint" />
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
index 25db41ec89..7b85cd4245 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
@@ -4,10 +4,10 @@ import InlineThroughputGraph from "../queues/InlineThroughputGraph.vue";
 import QueueName from "./QueueName.vue";
 import type { Queue } from "@/resources/LicenseDetails";
 
-const props = defineProps<{
+defineProps<{
   queues: Queue[];
-  actionsComponent?: Object;
-  additionalData?: Object;
+  actionsComponent?: object;
+  additionalData?: object;
 }>();
 </script>
 

From 9c3334ed5b1dc3e9505d07961f380ecb4b63f1e7 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Wed, 22 Jul 2026 09:31:20 +0800
Subject: [PATCH 29/30] more lint issues

---
 .../src/views/throughputreport/licenseDetails/UploadMetadata.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue b/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue
index 912d3203fd..f5824d1220 100644
--- a/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue
@@ -21,6 +21,7 @@ async function handleSubmit() {
   try {
     await licenseDetailsStore.uploadEndpointMetadata(file.value);
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.error(e);
     uploadError.value = true;
   } finally {

From ebf577eea68397b7ebd037070b7155a3e182bd3f Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Wed, 22 Jul 2026 10:07:21 +0800
Subject: [PATCH 30/30] fix test after change from link to button

---
 src/Frontend/src/views/throughputreport/EndpointsView.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts b/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
index cf773cf7fc..85a1b81d62 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
@@ -56,7 +56,7 @@ describe("EndpointsView tests", () => {
 
     const use = userEvent.setup();
 
-    await use.click(screen.getByRole("link", { name: /Show Endpoint Types meaning/i }));
+    await use.click(screen.getByRole("button", { name: /Show Endpoint Types meaning/i }));
 
     expect(screen.queryByText(/Hide Endpoint Types meaning/i)).toBeInTheDocument();
   });