From 091041335f72d963e681d5b84053f22c7fce1148 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Fri, 7 Aug 2026 11:02:35 +0200
Subject: [PATCH 01/16] feat(ui): add add-ons catalog page

---
 .../components/addons/AddonsCatalogPanel.vue  | 465 ++++++++++++++++++
 .../components/addons/AddonsReportPanel.vue   |  22 +
 .../addons/CreateOrEditAddonDrawer.vue        | 394 +++++++++++++++
 .../components/addons/DeleteAddonModal.vue    |  79 +++
 .../components/addons/ProductTypeSelector.vue |  80 +++
 frontend/src/components/shell/SideMenu.vue    |  16 +-
 frontend/src/i18n/en/translation.json         |  41 ++
 frontend/src/i18n/it/translation.json         |  41 ++
 frontend/src/lib/addons/addons.ts             | 240 +++++++++
 frontend/src/lib/permissions.ts               |  18 +
 frontend/src/lib/validation.ts                |  10 +
 frontend/src/queries/addons/addons.ts         |  25 +
 frontend/src/router/index.ts                  |   5 +
 frontend/src/views/AddonsView.vue             |  45 ++
 14 files changed, 1480 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/addons/AddonsCatalogPanel.vue
 create mode 100644 frontend/src/components/addons/AddonsReportPanel.vue
 create mode 100644 frontend/src/components/addons/CreateOrEditAddonDrawer.vue
 create mode 100644 frontend/src/components/addons/DeleteAddonModal.vue
 create mode 100644 frontend/src/components/addons/ProductTypeSelector.vue
 create mode 100644 frontend/src/lib/addons/addons.ts
 create mode 100644 frontend/src/queries/addons/addons.ts
 create mode 100644 frontend/src/views/AddonsView.vue

diff --git a/frontend/src/components/addons/AddonsCatalogPanel.vue b/frontend/src/components/addons/AddonsCatalogPanel.vue
new file mode 100644
index 000000000..4c3735812
--- /dev/null
+++ b/frontend/src/components/addons/AddonsCatalogPanel.vue
@@ -0,0 +1,465 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  The catalog endpoint returns the whole list in one unpaginated, unfiltered
+  response, so searching, filtering, sorting and paging all happen here rather
+  than in the query composable as on the other list pages.
+-->
+
+<script setup lang="ts">
+import {
+  faCirclePlus,
+  faMagnifyingGlass,
+  faPenToSquare,
+  faPuzzlePiece,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  NeButton,
+  NeDropdown,
+  NeDropdownFilterV2,
+  NeEmptyState,
+  NeInlineNotification,
+  NePaginator,
+  NeTable,
+  NeTableBody,
+  NeTableCell,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableRow,
+  NeTextInput,
+  type NeDropdownFilterV2Option,
+  type NeDropdownItem,
+  type SortEvent,
+} from '@nethesis/vue-components'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ApplicationLogo from '@/components/applications/ApplicationLogo.vue'
+import UpdatingSpinner from '@/components/common/UpdatingSpinner.vue'
+import SystemLogo from '@/components/systems/SystemLogo.vue'
+import {
+  ADDON_PRODUCTS,
+  ADDONS_TABLE_ID,
+  getAddonApplication,
+  getApplicationDisplayName,
+  type Addon,
+} from '@/lib/addons/addons'
+import { MIN_SEARCH_LENGTH } from '@/lib/common'
+import { canManageAddons } from '@/lib/permissions'
+import { getProductName } from '@/lib/systems/systems'
+import {
+  DEFAULT_PAGE_SIZE,
+  PAGE_SIZE_OPTIONS,
+  loadPageSizeFromStorage,
+  savePageSizeToStorage,
+} from '@/lib/tablePageSize'
+import { useAddons } from '@/queries/addons/addons'
+import { useLoginStore } from '@/stores/login'
+import CreateOrEditAddonDrawer from './CreateOrEditAddonDrawer.vue'
+import DeleteAddonModal from './DeleteAddonModal.vue'
+
+type AddonSortKey = 'display_name' | 'product' | 'application'
+
+const { t } = useI18n()
+const loginStore = useLoginStore()
+const { state, asyncStatus } = useAddons()
+
+const textFilter = ref('')
+const debouncedTextFilter = ref('')
+const productFilter = ref<NeDropdownFilterV2Option[]>([])
+const applicationFilter = ref<NeDropdownFilterV2Option[]>([])
+const sortBy = ref<AddonSortKey>('display_name')
+const sortDescending = ref(false)
+const pageNum = ref(1)
+const pageSize = ref(DEFAULT_PAGE_SIZE)
+
+const currentAddon = ref<Addon | undefined>()
+const isShownCreateOrEditAddonDrawer = ref(false)
+const isShownDeleteAddonModal = ref(false)
+
+const addons = computed(() => state.value.data ?? [])
+
+// The row shape the table renders: the product and the application are derived
+// from the add-on, not stored on it, and both filtering and sorting need them.
+const addonRows = computed(() =>
+  addons.value.map((addon) => {
+    const application = getAddonApplication(addon)
+
+    return {
+      addon,
+      product: addon.system_type ?? '',
+      productLabel: addon.system_type ? getProductName(addon.system_type) : '',
+      application,
+      applicationLabel: application ? getApplicationDisplayName(application) : '',
+    }
+  }),
+)
+
+const productFilterOptions = computed((): NeDropdownFilterV2Option[] =>
+  ADDON_PRODUCTS.map((product) => ({ id: product, label: getProductName(product) })),
+)
+
+// Only the applications actually present in the catalog, so the filter can
+// never select an empty set.
+const applicationFilterOptions = computed(() => {
+  const applications = new Set(
+    addonRows.value.map((row) => row.application).filter((application) => !!application),
+  )
+
+  return [...applications]
+    .map((application) => ({ id: application, label: getApplicationDisplayName(application) }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+})
+
+const filteredRows = computed(() => {
+  const search = debouncedTextFilter.value.trim().toLowerCase()
+  const products = productFilter.value.map((option) => option.id)
+  const applications = applicationFilter.value.map((option) => option.id)
+
+  return addonRows.value.filter((row) => {
+    if (products.length && !products.includes(row.product)) {
+      return false
+    }
+    if (applications.length && !applications.includes(row.application)) {
+      return false
+    }
+    if (
+      search &&
+      !`${row.addon.display_name} ${row.addon.description} ${row.addon.id}`
+        .toLowerCase()
+        .includes(search)
+    ) {
+      return false
+    }
+    return true
+  })
+})
+
+const sortedRows = computed(() => {
+  const direction = sortDescending.value ? -1 : 1
+
+  return [...filteredRows.value].sort((a, b) => {
+    switch (sortBy.value) {
+      case 'product':
+        return a.productLabel.localeCompare(b.productLabel) * direction
+      case 'application':
+        return a.applicationLabel.localeCompare(b.applicationLabel) * direction
+      default:
+        return a.addon.display_name.localeCompare(b.addon.display_name) * direction
+    }
+  })
+})
+
+const paginatedRows = computed(() =>
+  sortedRows.value.slice((pageNum.value - 1) * pageSize.value, pageNum.value * pageSize.value),
+)
+
+const isFiltered = computed(() => {
+  return (
+    !!debouncedTextFilter.value || !!productFilter.value.length || !!applicationFilter.value.length
+  )
+})
+
+const isNoDataEmptyStateShown = computed(() => {
+  return !addons.value.length && state.value.status === 'success' && !isFiltered.value
+})
+
+const isNoMatchEmptyStateShown = computed(() => {
+  return !sortedRows.value.length && state.value.status === 'success' && !!isFiltered.value
+})
+
+const noEmptyStateShown = computed(() => {
+  return !isNoDataEmptyStateShown.value && !isNoMatchEmptyStateShown.value
+})
+
+// load table page size from storage
+watch(
+  () => loginStore.userInfo?.email,
+  (email) => {
+    if (email) {
+      pageSize.value = loadPageSizeFromStorage(ADDONS_TABLE_ID)
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => textFilter.value,
+  useDebounceFn(() => {
+    // debounce and ignore if text filter is too short
+    if (textFilter.value.length === 0 || textFilter.value.length >= MIN_SEARCH_LENGTH) {
+      debouncedTextFilter.value = textFilter.value
+
+      // reset to first page when filter changes
+      pageNum.value = 1
+    }
+  }, 500),
+)
+
+// reset to first page when page size or any filter changes
+watch([() => pageSize.value, () => productFilter.value, () => applicationFilter.value], () => {
+  pageNum.value = 1
+})
+
+// a deletion or a narrower filter can leave the current page past the end
+watch([sortedRows, pageSize], () => {
+  const lastPage = Math.max(1, Math.ceil(sortedRows.value.length / pageSize.value))
+
+  if (pageNum.value > lastPage) {
+    pageNum.value = lastPage
+  }
+})
+
+function clearFilters() {
+  textFilter.value = ''
+  debouncedTextFilter.value = ''
+  productFilter.value = []
+  applicationFilter.value = []
+}
+
+function showCreateAddonDrawer() {
+  currentAddon.value = undefined
+  isShownCreateOrEditAddonDrawer.value = true
+}
+
+function showEditAddonDrawer(addon: Addon) {
+  currentAddon.value = addon
+  isShownCreateOrEditAddonDrawer.value = true
+}
+
+function showDeleteAddonModal(addon: Addon) {
+  currentAddon.value = addon
+  isShownDeleteAddonModal.value = true
+}
+
+function getKebabMenuItems(addon: Addon): NeDropdownItem[] {
+  return [
+    {
+      id: 'delete',
+      label: t('common.delete'),
+      icon: faTrash,
+      danger: true,
+      action: () => showDeleteAddonModal(addon),
+    },
+  ]
+}
+
+const onSort = (payload: SortEvent) => {
+  sortBy.value = payload.key as AddonSortKey
+  sortDescending.value = payload.descending
+}
+</script>
+
+<template>
+  <div>
+    <!-- page description -->
+    <div class="text-tertiary-neutral mb-8 max-w-2xl">
+      {{ $t('addons.page_description') }}
+    </div>
+    <!-- get add-ons error notification -->
+    <NeInlineNotification
+      v-if="state.status === 'error'"
+      kind="error"
+      :title="$t('addons.cannot_retrieve_addons')"
+      :description="state.error.message"
+      class="mb-6"
+    />
+    <!-- empty state -->
+    <NeEmptyState
+      v-if="isNoDataEmptyStateShown"
+      :title="$t('addons.no_addons')"
+      :description="$t('addons.no_addons_description')"
+      :icon="faPuzzlePiece"
+      class="bg-white dark:bg-gray-950"
+    >
+      <NeButton v-if="canManageAddons()" kind="primary" size="lg" @click="showCreateAddonDrawer">
+        <template #prefix>
+          <FontAwesomeIcon :icon="faCirclePlus" aria-hidden="true" />
+        </template>
+        {{ $t('addons.create_addon') }}
+      </NeButton>
+    </NeEmptyState>
+    <template v-if="!isNoDataEmptyStateShown">
+      <!-- table toolbar -->
+      <div class="mb-6 flex items-center gap-4">
+        <div class="flex w-full items-end justify-between gap-4">
+          <!-- filters -->
+          <div class="flex flex-wrap items-center gap-4">
+            <!-- text filter -->
+            <NeTextInput
+              v-model="textFilter"
+              @blur="textFilter = textFilter.trim()"
+              is-search
+              :placeholder="$t('addons.filter_addons')"
+              class="max-w-48 sm:max-w-sm"
+            />
+            <NeDropdownFilterV2
+              v-model="productFilter"
+              kind="checkbox"
+              :label="t('addons.product')"
+              :options="productFilterOptions"
+              :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+              :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+              :no-options-label="t('ne_dropdown_filter.no_options')"
+              :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+              :clear-search-label="t('ne_dropdown_filter.clear_search')"
+              :options-filter-placeholder="t('ne_dropdown_filter.options_filter_placeholder')"
+            />
+            <NeDropdownFilterV2
+              v-model="applicationFilter"
+              kind="checkbox"
+              :label="t('addons.application')"
+              :options="applicationFilterOptions"
+              show-options-filter
+              :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+              :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+              :no-options-label="t('ne_dropdown_filter.no_options')"
+              :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+              :clear-search-label="t('ne_dropdown_filter.clear_search')"
+              :options-filter-placeholder="t('ne_dropdown_filter.options_filter_placeholder')"
+            />
+            <NeButton kind="tertiary" @click="clearFilters">
+              {{ t('common.clear_filters') }}
+            </NeButton>
+          </div>
+          <div class="flex items-center gap-4">
+            <!-- update indicator -->
+            <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
+            <NeButton
+              v-if="canManageAddons()"
+              kind="primary"
+              class="shrink-0"
+              @click="showCreateAddonDrawer"
+            >
+              <template #prefix>
+                <FontAwesomeIcon :icon="faCirclePlus" aria-hidden="true" />
+              </template>
+              {{ $t('addons.create_addon') }}
+            </NeButton>
+          </div>
+        </div>
+      </div>
+      <!-- no add-on matching filter -->
+      <NeEmptyState
+        v-if="isNoMatchEmptyStateShown"
+        :title="$t('addons.no_addons_found')"
+        :description="$t('common.try_changing_search_filters')"
+        :icon="faMagnifyingGlass"
+        class="bg-white dark:bg-gray-950"
+      >
+        <NeButton kind="tertiary" @click="clearFilters">
+          {{ $t('common.clear_filters') }}
+        </NeButton>
+      </NeEmptyState>
+      <NeTable
+        v-if="noEmptyStateShown"
+        :sort-key="sortBy"
+        :sort-descending="sortDescending"
+        :aria-label="$t('addons.title')"
+        card-breakpoint="2xl"
+        :loading="state.status === 'pending'"
+        :skeleton-columns="4"
+        :skeleton-rows="7"
+      >
+        <NeTableHead>
+          <NeTableHeadCell sortable column-key="display_name" @sort="onSort">{{
+            $t('addons.addon_name')
+          }}</NeTableHeadCell>
+          <NeTableHeadCell sortable column-key="product" @sort="onSort">{{
+            $t('addons.product')
+          }}</NeTableHeadCell>
+          <NeTableHeadCell sortable column-key="application" @sort="onSort">{{
+            $t('addons.application')
+          }}</NeTableHeadCell>
+          <NeTableHeadCell>
+            <!-- no header for actions -->
+          </NeTableHeadCell>
+        </NeTableHead>
+        <NeTableBody>
+          <NeTableRow v-for="row in paginatedRows" :key="row.addon.id">
+            <NeTableCell :data-label="$t('addons.addon_name')">
+              <div class="font-medium">{{ row.addon.display_name }}</div>
+              <div v-if="row.addon.description" class="text-tertiary-neutral truncate">
+                {{ row.addon.description }}
+              </div>
+            </NeTableCell>
+            <NeTableCell :data-label="$t('addons.product')">
+              <div v-if="row.product" class="flex items-center gap-2">
+                <SystemLogo :system="row.product" />
+                <span>{{ row.productLabel }}</span>
+              </div>
+              <span v-else>-</span>
+            </NeTableCell>
+            <NeTableCell :data-label="$t('addons.application')">
+              <div v-if="row.application" class="flex items-center gap-2">
+                <ApplicationLogo :app="row.application" />
+                <span>{{ row.applicationLabel }}</span>
+              </div>
+              <span v-else>-</span>
+            </NeTableCell>
+            <NeTableCell :data-label="$t('common.actions')">
+              <div class="-ml-2.5 flex gap-2 2xl:ml-0 2xl:justify-end">
+                <NeButton
+                  v-if="canManageAddons()"
+                  kind="tertiary"
+                  @click="showEditAddonDrawer(row.addon)"
+                >
+                  <template #prefix>
+                    <FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4" aria-hidden="true" />
+                  </template>
+                  {{ $t('common.edit') }}
+                </NeButton>
+                <!-- kebab menu -->
+                <NeDropdown
+                  v-if="canManageAddons()"
+                  :items="getKebabMenuItems(row.addon)"
+                  :align-to-right="true"
+                  :open-menu-aria-label="$t('ne_dropdown.open_menu')"
+                />
+              </div>
+            </NeTableCell>
+          </NeTableRow>
+        </NeTableBody>
+        <template #paginator>
+          <NePaginator
+            :current-page="pageNum"
+            :total-rows="sortedRows.length"
+            :page-size="pageSize"
+            :page-sizes="PAGE_SIZE_OPTIONS"
+            :nav-pagination-label="$t('ne_table.pagination')"
+            :next-label="$t('ne_table.go_to_next_page')"
+            :previous-label="$t('ne_table.go_to_previous_page')"
+            :range-of-total-label="$t('ne_table.of')"
+            :page-size-label="$t('ne_table.show')"
+            @select-page="
+              (page: number) => {
+                pageNum = page
+              }
+            "
+            @select-page-size="
+              (size: number) => {
+                pageSize = size
+                savePageSizeToStorage(ADDONS_TABLE_ID, size)
+              }
+            "
+          />
+        </template>
+      </NeTable>
+    </template>
+    <!-- create/edit add-on drawer -->
+    <CreateOrEditAddonDrawer
+      :is-shown="isShownCreateOrEditAddonDrawer"
+      :current-addon="currentAddon"
+      @close="isShownCreateOrEditAddonDrawer = false"
+    />
+    <!-- delete add-on modal -->
+    <DeleteAddonModal
+      :visible="isShownDeleteAddonModal"
+      :addon="currentAddon"
+      @close="isShownDeleteAddonModal = false"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/addons/AddonsReportPanel.vue b/frontend/src/components/addons/AddonsReportPanel.vue
new file mode 100644
index 000000000..96aea5599
--- /dev/null
+++ b/frontend/src/components/addons/AddonsReportPanel.vue
@@ -0,0 +1,22 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  Placeholder for the add-on report. The backend already exposes the aggregates
+  (/entitlements/report, /report/organizations, /report/tiers); the panel that
+  renders them is not part of this change.
+-->
+
+<script setup lang="ts">
+import { NeEmptyState } from '@nethesis/vue-components'
+import { faChartLine } from '@fortawesome/free-solid-svg-icons'
+</script>
+
+<template>
+  <NeEmptyState
+    :title="$t('addons.report_not_available')"
+    :description="$t('addons.report_not_available_description')"
+    :icon="faChartLine"
+    class="bg-white dark:bg-gray-950"
+  />
+</template>
diff --git a/frontend/src/components/addons/CreateOrEditAddonDrawer.vue b/frontend/src/components/addons/CreateOrEditAddonDrawer.vue
new file mode 100644
index 000000000..c8391736d
--- /dev/null
+++ b/frontend/src/components/addons/CreateOrEditAddonDrawer.vue
@@ -0,0 +1,394 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeButton,
+  NeCombobox,
+  NeInlineNotification,
+  NeSideDrawer,
+  NeTextArea,
+  NeTextInput,
+  focusElement,
+  type NeComboboxOption,
+} from '@nethesis/vue-components'
+import { useMutation, useQueryCache } from '@pinia/colada'
+import type { AxiosError } from 'axios'
+import * as v from 'valibot'
+import { computed, ref, useTemplateRef, type ShallowRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  ADDON_APPLICATION_IDS,
+  ADDONS_KEY,
+  CreateAddonFormSchema,
+  EditAddonFormSchema,
+  composeAddonId,
+  getAddonApplication,
+  getAddonTechnicalName,
+  getApplicationDisplayName,
+  postAddon,
+  putAddon,
+  type Addon,
+  type AddonForm,
+  type AddonProduct,
+  type CreateAddon,
+  type EditAddon,
+} from '@/lib/addons/addons'
+import { getBackendErrorMessage, getValidationIssues } from '@/lib/validation'
+import { useNotificationsStore } from '@/stores/notifications'
+import ProductTypeSelector from './ProductTypeSelector.vue'
+
+const { isShown = false, currentAddon = undefined } = defineProps<{
+  isShown: boolean
+  currentAddon: Addon | undefined
+}>()
+
+const emit = defineEmits(['close'])
+
+const { t } = useI18n()
+const queryCache = useQueryCache()
+const notificationsStore = useNotificationsStore()
+
+const {
+  mutate: createAddonMutate,
+  isLoading: createAddonLoading,
+  reset: createAddonReset,
+  error: createAddonError,
+} = useMutation({
+  mutation: (newAddon: CreateAddon) => {
+    return postAddon(newAddon)
+  },
+  onSuccess(data, vars) {
+    // show success notification after drawer closes
+    setTimeout(() => {
+      notificationsStore.createNotification({
+        kind: 'success',
+        title: t('addons.addon_created'),
+        description: t('common.object_created_successfully', {
+          name: vars.display_name,
+        }),
+      })
+    }, 500)
+
+    closeDrawer()
+  },
+  onError: (error) => {
+    console.error('Error creating add-on:', error)
+    validationIssues.value = getValidationIssues(error as AxiosError, 'addons')
+  },
+  onSettled: () => queryCache.invalidateQueries({ key: [ADDONS_KEY] }),
+})
+
+const {
+  mutate: editAddonMutate,
+  isLoading: editAddonLoading,
+  reset: editAddonReset,
+  error: editAddonError,
+} = useMutation({
+  mutation: (addon: EditAddon) => {
+    return putAddon(addon)
+  },
+  onSuccess(data, vars) {
+    // show success notification after drawer closes
+    setTimeout(() => {
+      notificationsStore.createNotification({
+        kind: 'success',
+        title: t('addons.addon_saved'),
+        description: t('common.object_saved_successfully', {
+          name: vars.display_name,
+        }),
+      })
+    }, 500)
+
+    closeDrawer()
+  },
+  onError: (error) => {
+    console.error('Error editing add-on:', error)
+    validationIssues.value = getValidationIssues(error as AxiosError, 'addons')
+  },
+  onSettled: () => queryCache.invalidateQueries({ key: [ADDONS_KEY] }),
+})
+
+const product = ref<AddonProduct | ''>('')
+const application = ref('')
+const applicationRef = useTemplateRef<HTMLInputElement>('applicationRef')
+const technicalName = ref('')
+const technicalNameRef = useTemplateRef<HTMLInputElement>('technicalNameRef')
+const displayName = ref('')
+const displayNameRef = useTemplateRef<HTMLInputElement>('displayNameRef')
+const description = ref('')
+const descriptionRef = useTemplateRef<HTMLInputElement>('descriptionRef')
+const validationIssues = ref<Record<string, string[]>>({})
+
+const fieldRefs: Record<string, Readonly<ShallowRef<HTMLInputElement | null>>> = {
+  application: applicationRef,
+  technical_name: technicalNameRef,
+  display_name: displayNameRef,
+  description: descriptionRef,
+}
+
+const saving = computed(() => {
+  return createAddonLoading.value || editAddonLoading.value
+})
+
+// The product, the application and the technical name make up the add-on id,
+// which the backend treats as immutable: editing only touches the display name
+// and the description.
+const isEditing = computed(() => !!currentAddon)
+
+const applicationOptions = computed((): NeComboboxOption[] =>
+  ADDON_APPLICATION_IDS.map((applicationId) => ({
+    id: applicationId,
+    label: getApplicationDisplayName(applicationId),
+  })).sort((a, b) => a.label.localeCompare(b.label)),
+)
+
+const composedId = computed(() =>
+  composeAddonId({
+    product: product.value,
+    application: application.value,
+    technical_name: technicalName.value,
+  }),
+)
+
+// A validation-code response with no field errors (e.g. the 409 raised when the
+// id already exists) would otherwise be swallowed: the axios interceptor stays
+// quiet for those and there is nothing to attach to a field.
+function requestErrorMessage(error: Error | null) {
+  if (!error || Object.keys(validationIssues.value).length) {
+    return ''
+  }
+  return getBackendErrorMessage(error)
+}
+
+const createErrorMessage = computed(() => requestErrorMessage(createAddonError.value))
+const editErrorMessage = computed(() => requestErrorMessage(editAddonError.value))
+
+function onShow() {
+  clearErrors()
+
+  if (currentAddon) {
+    // editing add-on
+    product.value = (currentAddon.system_type as AddonProduct) || ''
+    application.value = getAddonApplication(currentAddon)
+    technicalName.value = getAddonTechnicalName(currentAddon)
+    displayName.value = currentAddon.display_name
+    description.value = currentAddon.description
+    focusElement(displayNameRef)
+  } else {
+    // creating add-on, reset form to defaults
+    product.value = ''
+    application.value = ''
+    technicalName.value = ''
+    displayName.value = ''
+    description.value = ''
+  }
+}
+
+function closeDrawer() {
+  emit('close')
+}
+
+function clearErrors() {
+  createAddonReset()
+  editAddonReset()
+  validationIssues.value = {}
+}
+
+function validate(schema: typeof CreateAddonFormSchema | typeof EditAddonFormSchema, form: object) {
+  validationIssues.value = {}
+  const validation = v.safeParse(schema, form)
+
+  if (validation.success) {
+    // no validation issues
+    return true
+  } else {
+    const flattenedIssues = v.flatten(validation.issues)
+
+    if (flattenedIssues.nested) {
+      const issues: Record<string, string[]> = {}
+
+      for (const key in flattenedIssues.nested) {
+        // replace dots with underscores for i18n key
+        const newKey = key.replace(/\./g, '_')
+        issues[newKey] = flattenedIssues.nested[key] ?? []
+      }
+      validationIssues.value = issues
+
+      // focus the first field with error
+      const firstErrorFieldName = Object.keys(validationIssues.value)[0]
+      fieldRefs[firstErrorFieldName]?.value?.focus()
+    }
+    return false
+  }
+}
+
+async function saveAddon() {
+  clearErrors()
+
+  if (currentAddon) {
+    // editing add-on: the backend accepts the display fields only
+    const form = {
+      display_name: displayName.value,
+      description: description.value,
+    }
+
+    if (!validate(EditAddonFormSchema, form)) {
+      return
+    }
+    editAddonMutate({ ...form, id: currentAddon.id })
+  } else {
+    // creating add-on
+    const form: AddonForm = {
+      product: product.value,
+      application: application.value,
+      technical_name: technicalName.value,
+      display_name: displayName.value,
+      description: description.value,
+    }
+
+    if (!validate(CreateAddonFormSchema, form)) {
+      return
+    }
+
+    createAddonMutate({
+      id: composedId.value,
+      display_name: form.display_name,
+      description: form.description,
+      // Both derived from the product: NethSecurity add-ons are firewall-wide
+      // services, NethServer add-ons are modules of a single application
+      // instance of a cluster.
+      kind: form.product === 'ns8' ? 'module' : 'service',
+      system_type: form.product as AddonProduct,
+      scoped: form.product === 'ns8',
+    })
+  }
+}
+</script>
+
+<template>
+  <NeSideDrawer
+    :is-shown="isShown"
+    :title="currentAddon ? $t('addons.edit_addon') : $t('addons.create_addon')"
+    :close-aria-label="$t('common.close')"
+    @show="onShow"
+    @close="closeDrawer"
+  >
+    <form @submit.prevent>
+      <div class="space-y-6">
+        <!-- product type -->
+        <ProductTypeSelector
+          v-model="product"
+          :label="$t('addons.product_type')"
+          :disabled="saving || isEditing"
+          :invalid-message="validationIssues.product?.[0] ? $t(validationIssues.product[0]) : ''"
+        />
+        <!-- application (NethServer add-ons only) -->
+        <NeCombobox
+          v-if="product === 'ns8'"
+          ref="applicationRef"
+          v-model="application"
+          :options="applicationOptions"
+          :label="$t('addons.application')"
+          :placeholder="$t('addons.choose_application')"
+          :invalid-message="
+            validationIssues.application?.[0] ? $t(validationIssues.application[0]) : ''
+          "
+          :disabled="saving || isEditing"
+          :no-results-label="$t('ne_combobox.no_results')"
+          :limited-options-label="$t('ne_combobox.limited_options_label')"
+          :no-options-label="$t('ne_combobox.no_options_label')"
+          :selected-label="$t('ne_combobox.selected')"
+          :user-input-label="$t('ne_combobox.user_input_label')"
+          :optional-label="$t('common.optional')"
+        />
+        <!-- display name -->
+        <NeTextInput
+          ref="displayNameRef"
+          v-model="displayName"
+          @blur="displayName = displayName.trim()"
+          :label="$t('addons.display_name')"
+          :placeholder="$t('common.eg_value', { value: 'Advanced Threat Shield' })"
+          :helper-text="$t('addons.display_name_helper')"
+          :invalid-message="
+            validationIssues.display_name?.[0] ? $t(validationIssues.display_name[0]) : ''
+          "
+          :disabled="saving"
+        />
+        <!-- technical name -->
+        <NeTextInput
+          ref="technicalNameRef"
+          v-model="technicalName"
+          @blur="technicalName = technicalName.trim()"
+          :label="$t('addons.technical_name')"
+          :placeholder="
+            $t('common.eg_value', {
+              value: product === 'ns8' ? 'blocklist' : 'advanced-threat-shield',
+            })
+          "
+          :helper-text="
+            composedId
+              ? $t('addons.technical_name_helper_with_id', { id: composedId })
+              : $t('addons.technical_name_helper')
+          "
+          :invalid-message="
+            validationIssues.technical_name?.[0] ? $t(validationIssues.technical_name[0]) : ''
+          "
+          :disabled="saving || isEditing"
+        />
+        <!-- description -->
+        <NeTextArea
+          ref="descriptionRef"
+          v-model="description"
+          @blur="description = description.trim()"
+          :label="$t('addons.description')"
+          :invalid-message="
+            validationIssues.description?.[0] ? $t(validationIssues.description[0]) : ''
+          "
+          :disabled="saving"
+          :optional="true"
+          :optional-label="t('common.optional')"
+        />
+        <!-- create add-on error notification -->
+        <NeInlineNotification
+          v-if="createErrorMessage"
+          kind="error"
+          :title="t('addons.cannot_create_addon')"
+          :description="createErrorMessage"
+        />
+        <!-- edit add-on error notification -->
+        <NeInlineNotification
+          v-if="editErrorMessage"
+          kind="error"
+          :title="t('addons.cannot_save_addon')"
+          :description="editErrorMessage"
+        />
+      </div>
+      <!-- footer -->
+      <hr class="my-8" />
+      <div class="flex justify-end">
+        <NeButton
+          kind="tertiary"
+          size="lg"
+          :disabled="saving"
+          class="mr-3"
+          @click.prevent="closeDrawer"
+        >
+          {{ $t('common.cancel') }}
+        </NeButton>
+        <NeButton
+          type="submit"
+          kind="primary"
+          size="lg"
+          :disabled="saving"
+          :loading="saving"
+          @click.prevent="saveAddon"
+        >
+          {{ currentAddon ? $t('addons.save_addon') : $t('addons.create_addon') }}
+        </NeButton>
+      </div>
+    </form>
+  </NeSideDrawer>
+</template>
diff --git a/frontend/src/components/addons/DeleteAddonModal.vue b/frontend/src/components/addons/DeleteAddonModal.vue
new file mode 100644
index 000000000..93dc81cb0
--- /dev/null
+++ b/frontend/src/components/addons/DeleteAddonModal.vue
@@ -0,0 +1,79 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { useMutation, useQueryCache } from '@pinia/colada'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import DeleteObjectModal from '@/components/common/DeleteObjectModal.vue'
+import { ADDONS_KEY, deleteAddon, type Addon } from '@/lib/addons/addons'
+import { getBackendErrorMessage } from '@/lib/validation'
+import { useNotificationsStore } from '@/stores/notifications'
+
+const { visible = false, addon = undefined } = defineProps<{
+  visible: boolean
+  addon: Addon | undefined
+}>()
+
+const emit = defineEmits(['close'])
+
+const { t } = useI18n()
+const notificationsStore = useNotificationsStore()
+const queryCache = useQueryCache()
+
+const {
+  mutate: deleteAddonMutate,
+  isLoading: deleteAddonLoading,
+  reset: deleteAddonReset,
+  error: deleteAddonError,
+} = useMutation({
+  mutation: (addon: Addon) => {
+    return deleteAddon(addon)
+  },
+  onSuccess(data, vars) {
+    // show success notification after modal closes
+    setTimeout(() => {
+      notificationsStore.createNotification({
+        kind: 'success',
+        title: t('addons.addon_deleted'),
+        description: t('common.object_deleted_successfully', {
+          name: vars.display_name,
+        }),
+      })
+    }, 500)
+
+    emit('close')
+  },
+  onError: (error) => {
+    console.error('Error deleting add-on:', error)
+  },
+  onSettled: () => queryCache.invalidateQueries({ key: [ADDONS_KEY] }),
+})
+
+// The backend refuses to delete an add-on that any system was ever granted, and
+// answers 409 with the reason. That is a validation code, so the global error
+// toast stays quiet and the modal has to show it.
+const deleteErrorMessage = computed(() => getBackendErrorMessage(deleteAddonError.value))
+
+function onShow() {
+  // clear error
+  deleteAddonReset()
+}
+</script>
+
+<template>
+  <DeleteObjectModal
+    :visible="visible"
+    :title="$t('addons.delete_addon')"
+    :primary-label="$t('common.delete')"
+    :deleting="deleteAddonLoading"
+    :confirmation-message="t('addons.delete_addon_confirmation', { name: addon?.display_name })"
+    :error-title="t('addons.cannot_delete_addon')"
+    :error-description="deleteErrorMessage"
+    @show="onShow"
+    @close="emit('close')"
+    @primary-click="deleteAddonMutate(addon!)"
+  />
+</template>
diff --git a/frontend/src/components/addons/ProductTypeSelector.vue b/frontend/src/components/addons/ProductTypeSelector.vue
new file mode 100644
index 000000000..21679642e
--- /dev/null
+++ b/frontend/src/components/addons/ProductTypeSelector.vue
@@ -0,0 +1,80 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  Card radio group for the product an add-on belongs to. A radio group rather
+  than a pair of buttons: the choice is exclusive and it drives the rest of the
+  form, so it has to be reachable with the arrow keys.
+-->
+
+<script setup lang="ts">
+import { faCircleCheck } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { NeFormItemLabel } from '@nethesis/vue-components'
+import { useId } from 'vue'
+import SystemLogo from '@/components/systems/SystemLogo.vue'
+import { ADDON_PRODUCTS, type AddonProduct } from '@/lib/addons/addons'
+import { getProductName } from '@/lib/systems/systems'
+
+const {
+  label,
+  disabled = false,
+  invalidMessage = '',
+} = defineProps<{
+  label: string
+  disabled?: boolean
+  invalidMessage?: string
+}>()
+
+const selectedProduct = defineModel<AddonProduct | ''>({ required: true })
+
+const groupName = useId()
+</script>
+
+<template>
+  <fieldset :disabled="disabled">
+    <legend>
+      <NeFormItemLabel>{{ label }}</NeFormItemLabel>
+    </legend>
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <label
+        v-for="product in ADDON_PRODUCTS"
+        :key="product"
+        :class="[
+          'bg-elevation-1 relative flex items-center gap-3 rounded-lg border px-4 py-3 transition-colors',
+          disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+          selectedProduct === product
+            ? 'border-primary-700 dark:border-primary-500'
+            : 'text-secondary-neutral border-gray-300 dark:border-gray-600',
+          !disabled && selectedProduct !== product
+            ? 'hover:border-gray-400 dark:hover:border-gray-500'
+            : '',
+        ]"
+      >
+        <input
+          v-model="selectedProduct"
+          type="radio"
+          :name="groupName"
+          :value="product"
+          :disabled="disabled"
+          class="peer sr-only"
+        />
+        <SystemLogo :system="product" />
+        <span class="font-medium">{{ getProductName(product) }}</span>
+        <FontAwesomeIcon
+          v-if="selectedProduct === product"
+          :icon="faCircleCheck"
+          class="text-primary-700 dark:text-primary-400 absolute top-2 right-2 size-3.5"
+          aria-hidden="true"
+        />
+        <!-- keyboard focus lands on the visually hidden radio, so mirror it here -->
+        <span
+          class="peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-300 pointer-events-none absolute inset-0 rounded-lg peer-focus-visible:ring-2"
+        />
+      </label>
+    </div>
+    <p v-if="invalidMessage" class="mt-2 text-sm text-rose-700 dark:text-rose-400">
+      {{ invalidMessage }}
+    </p>
+  </fieldset>
+</template>
diff --git a/frontend/src/components/shell/SideMenu.vue b/frontend/src/components/shell/SideMenu.vue
index ccf71cacc..126717426 100644
--- a/frontend/src/components/shell/SideMenu.vue
+++ b/frontend/src/components/shell/SideMenu.vue
@@ -22,6 +22,7 @@ import {
   faUserGroup as fasUserGroup,
   faServer as fasServer,
   faTriangleExclamation,
+  faPuzzlePiece,
 } from '@fortawesome/free-solid-svg-icons'
 import { faGridOne as fasGridOne } from '@nethesis/nethesis-solid-svg-icons'
 import {
@@ -41,6 +42,7 @@ import {
   canReadResellers,
   canReadSystems,
   canReadUsers,
+  isAddonAdmin,
 } from '@/lib/permissions'
 import { isUserCustomer } from '@/lib/organizations/organizations'
 
@@ -67,7 +69,7 @@ const menuExpanded: Ref<Record<string, boolean>> = ref({
   resellers: false,
 })
 
-const systemsManagementRoutes = ['alerts', 'systems', 'applications']
+const systemsManagementRoutes = ['alerts', 'systems', 'applications', 'addons']
 const companiesAndUsersRoutes = ['distributors', 'resellers', 'customers', 'users']
 
 const navigation = computed(() => {
@@ -102,6 +104,18 @@ const navigation = computed(() => {
     })
   }
 
+  // Managing the add-on catalog is a licensing back-office duty, so the entry
+  // answers to owner-level authority rather than to read:entitlements, which
+  // every company holds to see its own add-ons.
+  if (isAddonAdmin()) {
+    menuItems.push({
+      name: 'addons.title',
+      to: 'addons',
+      solidIcon: faPuzzlePiece,
+      lightIcon: faPuzzlePiece,
+    })
+  }
+
   if (canReadDistributors()) {
     menuItems.push({
       name: 'distributors.title',
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 22b085f40..3b56ebf82 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -38,6 +38,7 @@
     "object_saved_successfully": "{name} has been updated successfully",
     "object_destroyed_successfully": "{name} has been destroyed successfully",
     "object_archived_successfully": "{name} has been archived successfully",
+    "object_deleted_successfully": "{name} has been deleted successfully",
     "updating": "Updating…",
     "loading": "Loading…",
     "show": "Show",
@@ -842,6 +843,46 @@
     "hierarchy_filter_description": "Showing applications of {name} and of all companies in its hierarchy. Changing the Company filter will remove this hierarchy filtering.",
     "hierarchy_filter_exact": "Filter by this company only"
   },
+  "addons": {
+    "title": "Add-ons",
+    "page_description": "List of add-ons that can be granted to systems and sold on NethShop. Each add-on belongs to a product and, for NethServer, to a specific application.",
+    "report_tab": "Report",
+    "catalog_tab": "Catalog",
+    "report_not_available": "Report not available yet",
+    "report_not_available_description": "Add-on statistics will appear here in a future release.",
+    "cannot_retrieve_addons": "Cannot retrieve add-ons",
+    "no_addons": "No add-ons yet",
+    "no_addons_description": "Create the first add-on to make it available for systems and applications.",
+    "no_addons_found": "No add-ons found",
+    "filter_addons": "Filter add-ons",
+    "addon_name": "Add-on name",
+    "product": "Product",
+    "application": "Application",
+    "description": "Description",
+    "product_type": "Product type",
+    "choose_application": "Choose application",
+    "display_name": "Display name",
+    "display_name_helper": "The name shown to users in My Nethesis and NethShop.",
+    "technical_name": "Technical name",
+    "technical_name_helper": "Used to generate the add-on ID. It cannot be changed later.",
+    "technical_name_helper_with_id": "Used to generate the add-on ID: {id}. It cannot be changed later.",
+    "create_addon": "Create add-on",
+    "edit_addon": "Edit add-on",
+    "save_addon": "Save add-on",
+    "delete_addon": "Delete add-on",
+    "delete_addon_confirmation": "Add-on {name} will no longer be available.",
+    "addon_created": "Add-on created",
+    "addon_saved": "Add-on saved",
+    "addon_deleted": "Add-on deleted",
+    "cannot_create_addon": "Cannot create add-on",
+    "cannot_save_addon": "Cannot save add-on",
+    "cannot_delete_addon": "Cannot delete add-on",
+    "product_type_required": "Choose a product type",
+    "application_cannot_be_empty": "Choose an application",
+    "display_name_cannot_be_empty": "Display name cannot be empty",
+    "technical_name_cannot_be_empty": "Technical name cannot be empty",
+    "technical_name_is_invalid": "Technical name can only contain lowercase letters, numbers and hyphens"
+  },
   "forbidden": {
     "title": "Restricted page",
     "description": "It seems that you don't have the necessary permissions to view this page."
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 5df12ed06..77a4df89f 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -37,6 +37,7 @@
     "object_saved_successfully": "{name} è stato aggiornato con successo",
     "object_destroyed_successfully": "{name} è stato distrutto con successo",
     "object_archived_successfully": "{name} è stato archiviato con successo",
+    "object_deleted_successfully": "{name} è stato eliminato con successo",
     "updating": "Aggiornamento…",
     "loading": "Caricamento…",
     "show": "Mostra",
@@ -769,6 +770,46 @@
     "hierarchy_filter_description": "Sono mostrate le applicazioni di {name} e di tutte le aziende della sua gerarchia. Modificare il filtro Azienda rimuoverà il filtro per gerarchia.",
     "hierarchy_filter_exact": "Filtra solo per questa azienda"
   },
+  "addons": {
+    "title": "Add-on",
+    "page_description": "Elenco degli add-on che possono essere assegnati ai sistemi e venduti su NethShop. Ogni add-on appartiene a un prodotto e, per NethServer, a una specifica applicazione.",
+    "report_tab": "Report",
+    "catalog_tab": "Catalogo",
+    "report_not_available": "Report non ancora disponibile",
+    "report_not_available_description": "Le statistiche sugli add-on appariranno qui in una prossima versione.",
+    "cannot_retrieve_addons": "Impossibile recuperare gli add-on",
+    "no_addons": "Nessun add-on",
+    "no_addons_description": "Crea il primo add-on per renderlo disponibile per sistemi e applicazioni.",
+    "no_addons_found": "Nessun add-on trovato",
+    "filter_addons": "Filtra add-on",
+    "addon_name": "Nome add-on",
+    "product": "Prodotto",
+    "application": "Applicazione",
+    "description": "Descrizione",
+    "product_type": "Tipo di prodotto",
+    "choose_application": "Scegli applicazione",
+    "display_name": "Nome visualizzato",
+    "display_name_helper": "Il nome mostrato agli utenti in My Nethesis e NethShop.",
+    "technical_name": "Nome tecnico",
+    "technical_name_helper": "Utilizzato per generare l'ID dell'add-on. Non può essere modificato in seguito.",
+    "technical_name_helper_with_id": "Utilizzato per generare l'ID dell'add-on: {id}. Non può essere modificato in seguito.",
+    "create_addon": "Crea add-on",
+    "edit_addon": "Modifica add-on",
+    "save_addon": "Salva add-on",
+    "delete_addon": "Elimina add-on",
+    "delete_addon_confirmation": "L'add-on {name} non sarà più disponibile.",
+    "addon_created": "Add-on creato",
+    "addon_saved": "Add-on salvato",
+    "addon_deleted": "Add-on eliminato",
+    "cannot_create_addon": "Impossibile creare l'add-on",
+    "cannot_save_addon": "Impossibile salvare l'add-on",
+    "cannot_delete_addon": "Impossibile eliminare l'add-on",
+    "product_type_required": "Scegli un tipo di prodotto",
+    "application_cannot_be_empty": "Scegli un'applicazione",
+    "display_name_cannot_be_empty": "Il nome visualizzato non può essere vuoto",
+    "technical_name_cannot_be_empty": "Il nome tecnico non può essere vuoto",
+    "technical_name_is_invalid": "Il nome tecnico può contenere solo lettere minuscole, numeri e trattini"
+  },
   "forbidden": {
     "title": "Pagina riservata",
     "description": "Sembra che tu non abbia i permessi necessari per visualizzare questa pagina."
diff --git a/frontend/src/lib/addons/addons.ts b/frontend/src/lib/addons/addons.ts
new file mode 100644
index 000000000..41d1a5508
--- /dev/null
+++ b/frontend/src/lib/addons/addons.ts
@@ -0,0 +1,240 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import axios from 'axios'
+import * as v from 'valibot'
+import { API_URL } from '../config'
+import { useLoginStore } from '@/stores/login'
+
+export const ADDONS_KEY = 'addons'
+export const ADDONS_TABLE_ID = 'addonsTable'
+
+// The wire path and the permissions behind it are still named "entitlements":
+// that is the backend contract. Everything on this side is an add-on.
+const ADDONS_PATH = 'entitlements/catalog'
+
+// The product an add-on belongs to, matching the system types used everywhere
+// else in the app: nsec = NethSecurity, ns8 = NethServer.
+export const ADDON_PRODUCTS = ['nsec', 'ns8'] as const
+export type AddonProduct = (typeof ADDON_PRODUCTS)[number]
+
+// Derived from the product, never chosen by the user: NethSecurity add-ons are
+// firewall-wide services, NethServer add-ons are modules of a single
+// application instance of a cluster (hence scoped).
+const AddonKindSchema = v.picklist(['service', 'module'])
+export type AddonKind = v.InferOutput<typeof AddonKindSchema>
+
+// Same rule the backend enforces on the catalog id.
+export const ADDON_ID_REGEX = /^[a-z0-9][a-z0-9-]{1,98}$/
+
+const applicationLogoFiles = import.meta.glob('../../assets/application_logos/*.svg', {
+  eager: true,
+  import: 'default',
+}) as Record<string, string>
+
+// The applications a NethServer add-on can be attached to: the ids are the
+// application logo assets shipped with the frontend, so the list stays in step
+// with what we can actually render. GET /filters/applications is deliberately
+// not used — it only returns the application types currently installed in the
+// fleet, while the catalog must offer every supported application.
+export const ADDON_APPLICATION_IDS = Object.keys(applicationLogoFiles)
+  .map((path) => path.split('/').pop()!.replace('.svg', ''))
+  .sort()
+
+// Casing the file stems cannot carry. Anything missing falls back to a
+// capitalized id.
+const APPLICATION_DISPLAY_NAMES: Record<string, string> = {
+  crowdsec: 'CrowdSec',
+  dnsmaskq: 'Dnsmasq',
+  ejabberd: 'ejabberd',
+  grafana: 'Grafana',
+  imapsync: 'Imapsync',
+  mail: 'Mail',
+  matrix: 'Matrix',
+  mattermost: 'Mattermost',
+  netdata: 'Netdata',
+  'nethsecurity-controller': 'NethSecurity Controller',
+  nethvoice: 'NethVoice',
+  'nethvoice-proxy': 'NethVoice Proxy',
+  nextcloud: 'Nextcloud',
+  piler: 'Piler',
+  samba: 'Samba',
+  webtop: 'WebTop',
+}
+
+export const getApplicationDisplayName = (applicationId: string) => {
+  return (
+    APPLICATION_DISPLAY_NAMES[applicationId] ??
+    applicationId.charAt(0).toUpperCase() + applicationId.slice(1)
+  )
+}
+
+export const AddonSchema = v.object({
+  id: v.string(),
+  display_name: v.string(),
+  description: v.string(),
+  scoped: v.boolean(),
+  kind: AddonKindSchema,
+  system_type: v.optional(v.string()),
+  legacy_alias: v.optional(v.string()),
+  created_at: v.string(),
+  updated_at: v.string(),
+})
+
+export type Addon = v.InferOutput<typeof AddonSchema>
+
+// What POST /entitlements/catalog accepts.
+export interface CreateAddon {
+  id: string
+  display_name: string
+  description: string
+  kind: AddonKind
+  system_type: AddonProduct
+  scoped: boolean
+}
+
+// What PUT /entitlements/catalog/:id accepts: the backend takes the display
+// fields only, every other field is immutable once the add-on exists.
+export interface EditAddon {
+  id: string
+  display_name: string
+  description: string
+}
+
+interface AddonsResponse {
+  code: number
+  message: string
+  data: {
+    catalog: Addon[]
+  }
+}
+
+interface AddonResponse {
+  code: number
+  message: string
+  data: Addon
+}
+
+// The form the drawer edits. It does not mirror the wire shape: the user picks
+// a product and (for NethServer) an application, and the id is composed from
+// those plus the technical name.
+export interface AddonForm {
+  product: AddonProduct | ''
+  application: string
+  technical_name: string
+  display_name: string
+  description: string
+}
+
+// nsec-<service> for NethSecurity, <app>-<module> for NethServer, matching the
+// id convention the backend documents.
+export const composeAddonId = (
+  form: Pick<AddonForm, 'product' | 'application' | 'technical_name'>,
+) => {
+  const technicalName = form.technical_name.trim().toLowerCase()
+
+  if (!technicalName) {
+    return ''
+  }
+
+  switch (form.product) {
+    case 'nsec':
+      return `nsec-${technicalName.replace(/^nsec-/, '')}`
+    case 'ns8':
+      return form.application ? `${form.application}-${technicalName}` : ''
+    default:
+      return ''
+  }
+}
+
+// The application is encoded in the id prefix; there is no application field on
+// the add-on. Longest match wins, so nethvoice-proxy-* is not read as nethvoice.
+const applicationIdsByLength = [...ADDON_APPLICATION_IDS].sort((a, b) => b.length - a.length)
+
+export const getAddonApplication = (addon: Addon) => {
+  if (addon.kind !== 'module') {
+    return ''
+  }
+  return applicationIdsByLength.find((appId) => addon.id.startsWith(`${appId}-`)) ?? ''
+}
+
+// The technical name is the id without the product/application prefix — what
+// the user typed when the add-on was created.
+export const getAddonTechnicalName = (addon: Addon) => {
+  const application = getAddonApplication(addon)
+
+  if (application) {
+    return addon.id.slice(application.length + 1)
+  }
+  return addon.id.replace(/^nsec-/, '')
+}
+
+export const CreateAddonFormSchema = v.pipe(
+  v.object({
+    product: v.picklist(ADDON_PRODUCTS, 'addons.product_type_required'),
+    application: v.string(),
+    technical_name: v.pipe(v.string(), v.nonEmpty('addons.technical_name_cannot_be_empty')),
+    display_name: v.pipe(v.string(), v.nonEmpty('addons.display_name_cannot_be_empty')),
+    description: v.string(),
+  }),
+  v.forward(
+    v.check(
+      (form) => form.product !== 'ns8' || !!form.application,
+      'addons.application_cannot_be_empty',
+    ),
+    ['application'],
+  ),
+  v.forward(
+    v.check(
+      (form) => ADDON_ID_REGEX.test(composeAddonId(form)),
+      'addons.technical_name_is_invalid',
+    ),
+    ['technical_name'],
+  ),
+)
+
+// Editing only ever touches the two fields the backend lets us change.
+export const EditAddonFormSchema = v.object({
+  display_name: v.pipe(v.string(), v.nonEmpty('addons.display_name_cannot_be_empty')),
+  description: v.string(),
+})
+
+export const getAddons = () => {
+  const loginStore = useLoginStore()
+
+  return axios
+    .get<AddonsResponse>(`${API_URL}/${ADDONS_PATH}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data.catalog)
+}
+
+export const postAddon = (addon: CreateAddon) => {
+  const loginStore = useLoginStore()
+
+  return axios
+    .post<AddonResponse>(`${API_URL}/${ADDONS_PATH}`, addon, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
+
+export const putAddon = (addon: EditAddon) => {
+  const loginStore = useLoginStore()
+
+  return axios
+    .put<AddonResponse>(
+      `${API_URL}/${ADDONS_PATH}/${addon.id}`,
+      { display_name: addon.display_name, description: addon.description },
+      { headers: { Authorization: `Bearer ${loginStore.jwtToken}` } },
+    )
+    .then((res) => res.data.data)
+}
+
+export const deleteAddon = (addon: Addon) => {
+  const loginStore = useLoginStore()
+
+  return axios.delete(`${API_URL}/${ADDONS_PATH}/${addon.id}`, {
+    headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+  })
+}
diff --git a/frontend/src/lib/permissions.ts b/frontend/src/lib/permissions.ts
index 11138f94f..1a4af6eb6 100644
--- a/frontend/src/lib/permissions.ts
+++ b/frontend/src/lib/permissions.ts
@@ -23,6 +23,9 @@ const DESTROY_USERS = 'destroy:users'
 const DESTROY_SYSTEMS = 'destroy:systems'
 const READ_ALERTS = 'read:alerts'
 const MANAGE_ALERTS = 'manage:alerts'
+// The add-on permissions are still spelled "entitlements" on the wire
+const READ_ADDONS = 'read:entitlements'
+const MANAGE_ADDONS = 'manage:entitlements'
 const SUPER_ADMIN_ROLE = 'Super Admin'
 
 // "Owner-level authority": the Owner organization, or a Super Admin user
@@ -144,3 +147,18 @@ export const canReadAlerts = () => {
 // the button: the backend gate on PATCH /resellers/:id/promote additionally
 // keeps a Super Admin outside the Owner org within its own hierarchy.
 export const canPromoteOrganizations = () => hasOwnerLevelAuthority()
+
+export const canReadAddons = () => {
+  const loginStore = useLoginStore()
+  return loginStore.permissions.includes(READ_ADDONS)
+}
+
+export const canManageAddons = () => {
+  const loginStore = useLoginStore()
+  return loginStore.permissions.includes(MANAGE_ADDONS)
+}
+
+// The add-on catalog is a licensing back-office duty, not something every
+// distributor takes part in: owner organization or Super Admin only. Mirrors
+// the backend isEntitlementAdmin gate on the catalog write endpoints.
+export const isAddonAdmin = () => hasOwnerLevelAuthority()
diff --git a/frontend/src/lib/validation.ts b/frontend/src/lib/validation.ts
index 7bee63695..b20b12914 100644
--- a/frontend/src/lib/validation.ts
+++ b/frontend/src/lib/validation.ts
@@ -19,6 +19,16 @@ export const isValidationError = (error: Error | null): boolean => {
   return isValidationErrorCode((error as AxiosError)?.response?.status)
 }
 
+////
+// The message the backend sent, falling back to the axios one. Axios leaves
+// error.message as "Request failed with status code 409", which tells the user
+// nothing: reach for response.data.message whenever the API bothered to explain
+// itself (e.g. "catalog item is referenced by existing grants").
+export const getBackendErrorMessage = (error: Error | null): string => {
+  const axiosError = error as AxiosError<{ message?: string }> | null
+  return axiosError?.response?.data?.message || axiosError?.message || ''
+}
+
 export const isValidationErrorCode = (errorCode: number | undefined) => {
   if (!errorCode) {
     return false
diff --git a/frontend/src/queries/addons/addons.ts b/frontend/src/queries/addons/addons.ts
new file mode 100644
index 000000000..1f576bda3
--- /dev/null
+++ b/frontend/src/queries/addons/addons.ts
@@ -0,0 +1,25 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { ADDONS_KEY, getAddons } from '@/lib/addons/addons'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+
+// The catalog endpoint returns the whole list in one unpaginated, unfiltered
+// response, so this query takes no parameters: searching, filtering and paging
+// all happen client-side in the catalog panel.
+export const useAddons = defineQuery(() => {
+  const loginStore = useLoginStore()
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [ADDONS_KEY],
+    enabled: () => !!loginStore.jwtToken,
+    query: () => getAddons(),
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+  }
+})
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 0364d2b71..179c90e60 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -85,6 +85,11 @@ const router = createRouter({
       name: 'applications',
       component: () => import('../views/ApplicationsView.vue'),
     },
+    {
+      path: '/addons',
+      name: 'addons',
+      component: () => import('../views/AddonsView.vue'),
+    },
     {
       path: '/applications/:applicationId',
       name: 'application_detail',
diff --git a/frontend/src/views/AddonsView.vue b/frontend/src/views/AddonsView.vue
new file mode 100644
index 000000000..c95fb7ebd
--- /dev/null
+++ b/frontend/src/views/AddonsView.vue
@@ -0,0 +1,45 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { NeHeading, NeTabs } from '@nethesis/vue-components'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useTabs } from '@/composables/useTabs'
+import AddonsCatalogPanel from '@/components/addons/AddonsCatalogPanel.vue'
+import AddonsReportPanel from '@/components/addons/AddonsReportPanel.vue'
+
+const { t } = useI18n()
+
+const tabsConfig = computed(() => [
+  { name: 'report', label: t('addons.report_tab') },
+  { name: 'catalog', label: t('addons.catalog_tab') },
+])
+
+// The report tab is still empty, so land on the catalog unless a ?tab= says
+// otherwise.
+const { tabs, selectedTab } = useTabs(tabsConfig, 'catalog')
+</script>
+
+<template>
+  <div>
+    <!-- Header -->
+    <NeHeading tag="h3" class="mb-7">{{ $t('addons.title') }}</NeHeading>
+
+    <!-- Tab switcher -->
+    <NeTabs
+      :tabs="tabs"
+      :selected="selectedTab"
+      :sr-tabs-label="t('ne_tabs.tabs')"
+      :sr-select-tab-label="t('ne_tabs.select_a_tab')"
+      class="mb-8"
+      @select-tab="selectedTab = $event"
+    />
+
+    <!-- Tab content -->
+    <AddonsReportPanel v-if="selectedTab === 'report'" />
+    <AddonsCatalogPanel v-else />
+  </div>
+</template>

From 8cec608d8ca08632697c2e3305332cef806a2e6a Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Fri, 7 Aug 2026 18:16:33 +0200
Subject: [PATCH 02/16] feat(ui): add system add-ons page

---
 frontend/.env.example                         |   1 +
 .../components/systems/SystemAddonsPanel.vue  | 129 +++++
 .../systems/addons/AddonActionModal.vue       | 139 +++++
 .../systems/addons/AddonStatusIcon.vue        |  79 +++
 .../systems/addons/SystemAddonCard.vue        |  74 +++
 .../systems/addons/SystemAddonDetail.vue      | 514 ++++++++++++++++++
 .../systems/addons/SystemAddonsGrid.vue       | 227 ++++++++
 frontend/src/i18n/en/translation.json         |  53 +-
 frontend/src/i18n/it/translation.json         |  53 +-
 frontend/src/lib/addons/systemAddons.ts       | 311 +++++++++++
 frontend/src/lib/dateTime.test.ts             |  27 +-
 frontend/src/lib/dateTime.ts                  |  12 +
 frontend/src/lib/permissions.ts               |   5 +
 frontend/src/queries/addons/systemAddons.ts   |  68 +++
 frontend/src/views/SystemDetailView.vue       |  37 +-
 15 files changed, 1719 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/systems/SystemAddonsPanel.vue
 create mode 100644 frontend/src/components/systems/addons/AddonActionModal.vue
 create mode 100644 frontend/src/components/systems/addons/AddonStatusIcon.vue
 create mode 100644 frontend/src/components/systems/addons/SystemAddonCard.vue
 create mode 100644 frontend/src/components/systems/addons/SystemAddonDetail.vue
 create mode 100644 frontend/src/components/systems/addons/SystemAddonsGrid.vue
 create mode 100644 frontend/src/lib/addons/systemAddons.ts
 create mode 100644 frontend/src/queries/addons/systemAddons.ts

diff --git a/frontend/.env.example b/frontend/.env.example
index 720ea0f59..da8badd5a 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -5,3 +5,4 @@ VITE_SIGNOUT_REDIRECT_URI=your-signout-redirect-uri
 VITE_API_BASE_URL=your-api-base-url
 VITE_LOGTO_ENDPOINT=your-logto-endpoint
 VITE_LOGTO_APP_ID=your-logto-app-id
+VITE_SHOP_BASE_URL=your-shop-base-url
diff --git a/frontend/src/components/systems/SystemAddonsPanel.vue b/frontend/src/components/systems/SystemAddonsPanel.vue
new file mode 100644
index 000000000..5e93a08d0
--- /dev/null
+++ b/frontend/src/components/systems/SystemAddonsPanel.vue
@@ -0,0 +1,129 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  Add-ons tab of a system. Three endpoints back it — the grants, the add-ons
+  the company is allowed to have, and the system's application instances —
+  because the grant payload carries neither the add-on's name nor the name of
+  the application it is scoped to. They are joined into rows here, once, and
+  shared by the card grid and the detail table.
+
+  The selected add-on lives in ?addon= next to ?tab=, so the drill-down
+  survives a reload and answers the back button.
+-->
+
+<script setup lang="ts">
+import { NeInlineNotification } from '@nethesis/vue-components'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { composeSystemAddonRows } from '@/lib/addons/systemAddons'
+import {
+  useAvailableAddons,
+  useSystemAddons,
+  useSystemApplications,
+} from '@/queries/addons/systemAddons'
+import { useSystemDetail } from '@/queries/systems/systemDetail'
+import SystemAddonDetail from './addons/SystemAddonDetail.vue'
+import SystemAddonsGrid from './addons/SystemAddonsGrid.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const { state: addonsState, asyncStatus: addonsAsyncStatus } = useSystemAddons()
+const { state: availableState } = useAvailableAddons()
+const { state: applicationsState } = useSystemApplications()
+const { state: systemDetail } = useSystemDetail()
+
+const system = computed(() => systemDetail.value.data)
+
+const selectedAddonId = computed(() => (route.query.addon as string) ?? '')
+
+const isLoading = computed(
+  () =>
+    addonsState.value.status === 'pending' ||
+    availableState.value.status === 'pending' ||
+    applicationsState.value.status === 'pending',
+)
+
+const isRefreshing = computed(
+  () => addonsAsyncStatus.value === 'loading' && addonsState.value.status !== 'pending',
+)
+
+const rows = computed(() =>
+  composeSystemAddonRows({
+    availableAddons: availableState.value.data ?? [],
+    grants: addonsState.value.data ?? [],
+    applications: applicationsState.value.data?.applications ?? [],
+    systemType: system.value?.type ?? '',
+    systemName: system.value?.name ?? '',
+  }),
+)
+
+const selectedRows = computed(() =>
+  rows.value.filter((row) => row.addon.id === selectedAddonId.value),
+)
+
+// Losing the grants is fatal to the page; losing availability only costs the
+// add-ons nobody bought yet, so that one warns and lets the rest render.
+const isGridShown = computed(() => addonsState.value.status !== 'error')
+
+function openAddon(addonId: string) {
+  router.push({ query: { ...route.query, addon: addonId } })
+}
+
+function closeAddon() {
+  const { addon, ...query } = route.query
+  void addon
+  router.push({ query })
+}
+</script>
+
+<template>
+  <div>
+    <!-- page description -->
+    <div class="text-tertiary-neutral mb-8 max-w-3xl">
+      {{ $t('addons.system_addons_description') }}
+    </div>
+    <!-- get add-ons error notification -->
+    <NeInlineNotification
+      v-if="addonsState.status === 'error'"
+      kind="error"
+      :title="$t('addons.cannot_retrieve_system_addons')"
+      :description="addonsState.error.message"
+      class="mb-6"
+    />
+    <!-- get available add-ons error notification -->
+    <NeInlineNotification
+      v-if="availableState.status === 'error'"
+      kind="warning"
+      :title="$t('addons.cannot_retrieve_available_addons')"
+      :description="availableState.error.message"
+      class="mb-6"
+    />
+    <!-- get applications error notification -->
+    <NeInlineNotification
+      v-if="applicationsState.status === 'error'"
+      kind="warning"
+      :title="$t('addons.cannot_retrieve_applications')"
+      :description="applicationsState.error.message"
+      class="mb-6"
+    />
+    <template v-if="isGridShown">
+      <SystemAddonDetail
+        v-if="selectedAddonId"
+        :addon-id="selectedAddonId"
+        :rows="selectedRows"
+        :loading="isLoading"
+        :refreshing="isRefreshing"
+        @back="closeAddon"
+      />
+      <SystemAddonsGrid
+        v-else
+        :rows="rows"
+        :loading="isLoading"
+        :refreshing="isRefreshing"
+        @open="openAddon"
+      />
+    </template>
+  </div>
+</template>
diff --git a/frontend/src/components/systems/addons/AddonActionModal.vue b/frontend/src/components/systems/addons/AddonActionModal.vue
new file mode 100644
index 000000000..85bc696cc
--- /dev/null
+++ b/frontend/src/components/systems/addons/AddonActionModal.vue
@@ -0,0 +1,139 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  Activate, revoke and reactivate share one modal: same layout, same
+  confirmation shape, same toast, only the endpoint and the wording differ.
+  Keeping them apart would have meant three near-identical files.
+
+  There is deliberately no suspend action: the backend has no per-grant
+  suspend, and `suspended` is derived from the owning system's own status.
+-->
+
+<script setup lang="ts">
+import { NeInlineNotification, NeModal } from '@nethesis/vue-components'
+import { useMutation, useQueryCache } from '@pinia/colada'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import {
+  SYSTEM_ADDONS_KEY,
+  grantSystemAddon,
+  restoreSystemAddon,
+  revokeSystemAddon,
+  type SystemAddonRow,
+} from '@/lib/addons/systemAddons'
+import { getBackendErrorMessage } from '@/lib/validation'
+import { useNotificationsStore } from '@/stores/notifications'
+import type { AxiosError } from 'axios'
+
+export type AddonAction = 'activate' | 'revoke' | 'reactivate'
+
+const {
+  visible = false,
+  action,
+  row = undefined,
+} = defineProps<{
+  visible: boolean
+  action: AddonAction
+  row: SystemAddonRow | undefined
+}>()
+
+const emit = defineEmits(['close'])
+
+const { t } = useI18n()
+const route = useRoute()
+const notificationsStore = useNotificationsStore()
+const queryCache = useQueryCache()
+
+const systemId = computed(() => route.params.systemId as string)
+
+// Revoking takes something away, so it warns and its button is destructive;
+// the other two only ever add access back.
+const isDestructive = computed(() => action === 'revoke')
+
+const callers: Record<AddonAction, (row: SystemAddonRow) => Promise<unknown>> = {
+  activate: (row) => grantSystemAddon(systemId.value, row.addon.id, row.scope),
+  revoke: (row) => revokeSystemAddon(systemId.value, row.addon.id, row.scope),
+  reactivate: (row) => restoreSystemAddon(systemId.value, row.addon.id, row.scope),
+}
+
+const {
+  mutate: runAction,
+  isLoading,
+  reset,
+  error,
+} = useMutation({
+  mutation: (row: SystemAddonRow) => callers[action](row),
+  onSuccess(data, vars) {
+    // show success notification after modal closes
+    setTimeout(() => {
+      notificationsStore.createNotification({
+        kind: 'success',
+        title: t(`addons.addon_${action}d`),
+        description: t(`addons.addon_${action}d_successfully`, {
+          name: vars.addon.display_name,
+          application: vars.applicationLabel,
+        }),
+      })
+    }, 500)
+
+    emit('close')
+  },
+  onError: (error) => {
+    console.error(`Error running add-on action "${action}":`, error)
+  },
+  onSettled: () => queryCache.invalidateQueries({ key: [SYSTEM_ADDONS_KEY, systemId.value] }),
+})
+
+// 409 is the one failure worth naming: the grant already exists, usually
+// because the list went stale. Everything else falls back to what the backend
+// said, since the axios interceptor stays quiet for validation codes.
+const errorMessage = computed(() => {
+  if (!error.value) {
+    return ''
+  }
+  if ((error.value as AxiosError).response?.status === 409) {
+    return t('addons.addon_already_granted')
+  }
+  return getBackendErrorMessage(error.value)
+})
+
+function onShow() {
+  // clear error
+  reset()
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="visible"
+    :title="$t(`addons.${action}_addon`)"
+    :kind="isDestructive ? 'warning' : 'info'"
+    :primary-label="$t(`addons.${action}`)"
+    :cancel-label="$t('common.cancel')"
+    :primary-button-kind="isDestructive ? 'danger' : 'primary'"
+    :primary-button-disabled="isLoading"
+    :primary-button-loading="isLoading"
+    :close-aria-label="$t('common.close')"
+    @show="onShow"
+    @close="emit('close')"
+    @primary-click="runAction(row!)"
+  >
+    <p>
+      {{
+        t(`addons.${action}_addon_confirmation`, {
+          name: row?.addon.display_name,
+          application: row?.applicationLabel,
+        })
+      }}
+    </p>
+    <NeInlineNotification
+      v-if="errorMessage"
+      kind="error"
+      :title="t(`addons.cannot_${action}_addon`)"
+      :description="errorMessage"
+      class="mt-4"
+    />
+  </NeModal>
+</template>
diff --git a/frontend/src/components/systems/addons/AddonStatusIcon.vue b/frontend/src/components/systems/addons/AddonStatusIcon.vue
new file mode 100644
index 000000000..173b7877f
--- /dev/null
+++ b/frontend/src/components/systems/addons/AddonStatusIcon.vue
@@ -0,0 +1,79 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  Where an add-on stands in one place. Shaped after SystemStatusIcon: a v-if
+  chain rather than a lookup map, so the icon, the colour and the label of a
+  state all stay on one line.
+
+  Both the card and the detail table render this, so a place cannot be called
+  one thing in the summary and another in the table it opens onto. Pass `count`
+  on the card to name the state and count the applications in it at once.
+-->
+
+<script setup lang="ts">
+import {
+  faBan,
+  faCircleCheck,
+  faCircleMinus,
+  faCirclePause,
+  faClock,
+  faHourglassEnd,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import type { AddonRowStatus } from '@/lib/addons/systemAddons'
+
+const { status, count } = defineProps<{
+  status: AddonRowStatus
+  // when set, the label counts the applications in this state instead of
+  // simply naming it
+  count?: number
+}>()
+</script>
+
+<template>
+  <span class="flex items-center gap-2">
+    <FontAwesomeIcon
+      v-if="status === 'active'"
+      :icon="faCircleCheck"
+      class="text-icon-enabled size-4 shrink-0"
+      aria-hidden="true"
+    />
+    <FontAwesomeIcon
+      v-else-if="status === 'pending'"
+      :icon="faClock"
+      class="size-4 shrink-0 text-amber-700 dark:text-amber-500"
+      aria-hidden="true"
+    />
+    <FontAwesomeIcon
+      v-else-if="status === 'suspended'"
+      :icon="faCirclePause"
+      class="size-4 shrink-0 text-gray-700 dark:text-gray-400"
+      aria-hidden="true"
+    />
+    <FontAwesomeIcon
+      v-else-if="status === 'revoked'"
+      :icon="faBan"
+      class="size-4 shrink-0 text-rose-700 dark:text-rose-500"
+      aria-hidden="true"
+    />
+    <!-- expired is amber, not rose: buying again fixes it, unlike a revocation -->
+    <FontAwesomeIcon
+      v-else-if="status === 'expired'"
+      :icon="faHourglassEnd"
+      class="size-4 shrink-0 text-amber-700 dark:text-amber-500"
+      aria-hidden="true"
+    />
+    <!-- never granted here: nothing has gone wrong, so nothing is coloured -->
+    <FontAwesomeIcon
+      v-else
+      :icon="faCircleMinus"
+      class="text-icon-disabled size-4 shrink-0"
+      aria-hidden="true"
+    />
+    <span v-if="count === undefined">{{ $t(`addons.status_${status}`) }}</span>
+    <span v-else>
+      {{ $t(`addons.${status}_on_n_applications`, { n: count }, count) }}
+    </span>
+  </span>
+</template>
diff --git a/frontend/src/components/systems/addons/SystemAddonCard.vue b/frontend/src/components/systems/addons/SystemAddonCard.vue
new file mode 100644
index 000000000..54a992048
--- /dev/null
+++ b/frontend/src/components/systems/addons/SystemAddonCard.vue
@@ -0,0 +1,74 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  One add-on of a system, summarised over the places it applies to: a line per
+  state any of them is in. A NethServer module counts its application
+  instances; a NethSecurity service covers the whole firewall, so it states its
+  state plainly rather than claiming to be "active on 1 application".
+-->
+
+<script setup lang="ts">
+import { faArrowRightLong } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { NeButton, NeCard } from '@nethesis/vue-components'
+import { computed } from 'vue'
+import ApplicationLogo from '@/components/applications/ApplicationLogo.vue'
+import SystemLogo from '@/components/systems/SystemLogo.vue'
+import { ADDON_ROW_STATUSES, type AddonRowStatus } from '@/lib/addons/systemAddons'
+import type { Addon } from '@/lib/addons/addons'
+import AddonStatusIcon from './AddonStatusIcon.vue'
+
+const { addon, applicationId, counts, scoped } = defineProps<{
+  addon: Addon
+  // the application these rows belong to, '' for a system-wide service
+  applicationId: string
+  counts: Record<AddonRowStatus, number>
+  // false for a NethSecurity service: one place, so no counting
+  scoped: boolean
+}>()
+
+const emit = defineEmits<{ details: [] }>()
+
+const statusLines = computed(() =>
+  ADDON_ROW_STATUSES.filter((status) => counts[status] > 0).map((status) => ({
+    status,
+    count: counts[status],
+  })),
+)
+</script>
+
+<template>
+  <NeCard>
+    <div class="flex h-full flex-col gap-5">
+      <!-- logo + name + description -->
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-3">
+          <ApplicationLogo v-if="applicationId" :app="applicationId" />
+          <SystemLogo v-else system="nsec" />
+          <p class="font-medium text-gray-900 dark:text-gray-100">{{ addon.display_name }}</p>
+        </div>
+        <p v-if="addon.description" class="text-tertiary-neutral">{{ addon.description }}</p>
+      </div>
+      <!-- one line per state the add-on is in somewhere on this system -->
+      <div class="flex flex-col gap-2">
+        <AddonStatusIcon
+          v-for="line in statusLines"
+          :key="line.status"
+          :status="line.status"
+          :count="scoped ? line.count : undefined"
+          class="pb-1 text-sm font-medium"
+        />
+      </div>
+      <!-- pushed to the bottom so cards of differing height line their buttons up -->
+      <div class="mt-auto flex justify-end">
+        <NeButton kind="tertiary" @click="emit('details')">
+          {{ $t('addons.details') }}
+          <template #suffix>
+            <FontAwesomeIcon :icon="faArrowRightLong" class="size-4" aria-hidden="true" />
+          </template>
+        </NeButton>
+      </div>
+    </div>
+  </NeCard>
+</template>
diff --git a/frontend/src/components/systems/addons/SystemAddonDetail.vue b/frontend/src/components/systems/addons/SystemAddonDetail.vue
new file mode 100644
index 000000000..6c4675152
--- /dev/null
+++ b/frontend/src/components/systems/addons/SystemAddonDetail.vue
@@ -0,0 +1,514 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  Where one add-on stands on this system: a row per application instance on a
+  NethServer cluster, a single row for a NethSecurity service, which covers the
+  whole firewall and so shows the system itself in the Application column.
+
+  The grant endpoint takes no page, search or sort parameters and returns the
+  system's whole list at once, so the filtering, sorting and paging below all
+  happen here.
+-->
+
+<script setup lang="ts">
+import {
+  faArrowLeft,
+  faArrowUpRightFromSquare,
+  faBan,
+  faCircleCheck,
+  faMagnifyingGlass,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  NeButton,
+  NeDropdown,
+  NeDropdownFilterV2,
+  NeEmptyState,
+  NePaginator,
+  NeSkeleton,
+  NeTable,
+  NeTableBody,
+  NeTableCell,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableRow,
+  NeTextInput,
+  type NeDropdownFilterV2Option,
+  type NeDropdownItem,
+} from '@nethesis/vue-components'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ApplicationLogo from '@/components/applications/ApplicationLogo.vue'
+import UpdatingSpinner from '@/components/common/UpdatingSpinner.vue'
+import SystemLogo from '@/components/systems/SystemLogo.vue'
+import UserAvatar from '@/components/users/UserAvatar.vue'
+import {
+  ADDON_ROW_STATUSES,
+  SYSTEM_ADDONS_TABLE_ID,
+  getBuyUrl,
+  getOrderNumber,
+  getOrderUrl,
+  getRowStatus,
+  type SystemAddonRow,
+} from '@/lib/addons/systemAddons'
+import { MIN_SEARCH_LENGTH } from '@/lib/common'
+import { formatDateNoTime } from '@/lib/dateTime'
+import { canBuyAddons, isAddonAdmin } from '@/lib/permissions'
+import {
+  DEFAULT_PAGE_SIZE,
+  PAGE_SIZE_OPTIONS,
+  loadPageSizeFromStorage,
+  savePageSizeToStorage,
+} from '@/lib/tablePageSize'
+import { useSystemDetail } from '@/queries/systems/systemDetail'
+import { useLoginStore } from '@/stores/login'
+import AddonActionModal, { type AddonAction } from './AddonActionModal.vue'
+import AddonStatusIcon from './AddonStatusIcon.vue'
+
+const { rows, loading, refreshing } = defineProps<{
+  addonId: string
+  rows: SystemAddonRow[]
+  loading: boolean
+  refreshing: boolean
+}>()
+
+const emit = defineEmits<{ back: [] }>()
+
+const { t, locale } = useI18n()
+const loginStore = useLoginStore()
+const { state: systemDetail } = useSystemDetail()
+
+const textFilter = ref('')
+const debouncedTextFilter = ref('')
+const purchaserFilter = ref<NeDropdownFilterV2Option[]>([])
+const statusFilter = ref<NeDropdownFilterV2Option[]>([])
+const pageNum = ref(1)
+const pageSize = ref(DEFAULT_PAGE_SIZE)
+
+const currentRow = ref<SystemAddonRow | undefined>()
+const currentAction = ref<AddonAction>('activate')
+const isShownActionModal = ref(false)
+
+const addonName = computed(() => rows[0]?.addon.display_name ?? '')
+
+// A NethSecurity service covers the whole firewall rather than any one
+// application, so the first column names the system instead. Decided from the
+// rows rather than from the product, because an nsec service granted to a
+// cluster reads the same way.
+const isSystemScoped = computed(() => rows.every((row) => !row.applicationId))
+
+const firstColumnLabel = computed(() =>
+  isSystemScoped.value ? t('systems.system') : t('addons.application'),
+)
+
+// Filtering one row is busywork: a firewall service has exactly one, and so
+// does a cluster running a single instance of the application.
+const areFiltersShown = computed(() => rows.length > 1)
+
+// A suspended or deleted system cannot use anything it holds — collect turns
+// its credentials away before it ever looks at the grants — so buying more is
+// pointless while it stays that way.
+const isSystemBlocked = computed(() =>
+  ['suspended', 'deleted'].includes(systemDetail.value.data?.status ?? ''),
+)
+
+const getPurchaserName = (row: SystemAddonRow) => {
+  const purchaser = row.grant?.purchased_by
+
+  if (!purchaser || purchaser.out_of_scope) {
+    return ''
+  }
+  return purchaser.name ?? purchaser.email ?? ''
+}
+
+const purchaserFilterOptions = computed((): NeDropdownFilterV2Option[] => {
+  const names = new Set(rows.map(getPurchaserName).filter((name) => !!name))
+
+  return [...names].sort().map((name) => ({ id: name, label: name }))
+})
+
+const statusFilterOptions = computed((): NeDropdownFilterV2Option[] =>
+  ADDON_ROW_STATUSES.map((status) => ({ id: status, label: t(`addons.status_${status}`) })),
+)
+
+const filteredRows = computed(() => {
+  const search = debouncedTextFilter.value.trim().toLowerCase()
+  const purchasers = purchaserFilter.value.map((option) => option.id)
+  const statuses = statusFilter.value.map((option) => option.id)
+
+  return rows.filter((row) => {
+    if (purchasers.length && !purchasers.includes(getPurchaserName(row))) {
+      return false
+    }
+    if (statuses.length && !statuses.includes(getRowStatus(row))) {
+      return false
+    }
+    if (search && !row.applicationLabel.toLowerCase().includes(search)) {
+      return false
+    }
+    return true
+  })
+})
+
+const paginatedRows = computed(() =>
+  filteredRows.value.slice((pageNum.value - 1) * pageSize.value, pageNum.value * pageSize.value),
+)
+
+const isFiltered = computed(
+  () =>
+    !!debouncedTextFilter.value || !!purchaserFilter.value.length || !!statusFilter.value.length,
+)
+
+const isNoMatchEmptyStateShown = computed(
+  () => !loading && !filteredRows.value.length && isFiltered.value,
+)
+
+// load table page size from storage
+watch(
+  () => loginStore.userInfo?.email,
+  (email) => {
+    if (email) {
+      pageSize.value = loadPageSizeFromStorage(SYSTEM_ADDONS_TABLE_ID)
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => textFilter.value,
+  useDebounceFn(() => {
+    // debounce and ignore if text filter is too short
+    if (textFilter.value.length === 0 || textFilter.value.length >= MIN_SEARCH_LENGTH) {
+      debouncedTextFilter.value = textFilter.value
+
+      // reset to first page when filter changes
+      pageNum.value = 1
+    }
+  }, 500),
+)
+
+// reset to first page when page size or any filter changes
+watch([() => pageSize.value, () => purchaserFilter.value, () => statusFilter.value], () => {
+  pageNum.value = 1
+})
+
+// a narrower filter can leave the current page past the end
+watch([filteredRows, pageSize], () => {
+  const lastPage = Math.max(1, Math.ceil(filteredRows.value.length / pageSize.value))
+
+  if (pageNum.value > lastPage) {
+    pageNum.value = lastPage
+  }
+})
+
+function clearFilters() {
+  textFilter.value = ''
+  debouncedTextFilter.value = ''
+  purchaserFilter.value = []
+  statusFilter.value = []
+}
+
+function showActionModal(row: SystemAddonRow, action: AddonAction) {
+  currentRow.value = row
+  currentAction.value = action
+  isShownActionModal.value = true
+}
+
+// Nothing is offered on a blocked system, and nothing can be bought that the
+// company is not allowed to have in the first place.
+function canBuy(row: SystemAddonRow) {
+  if (!canBuyAddons() || isSystemBlocked.value) {
+    return false
+  }
+  if (!row.grant) {
+    return true
+  }
+  // a shop-side revocation (cancelled subscription, failed payment) can be
+  // undone by buying again; a deliberate one cannot
+  return (
+    row.grant.status === 'expired' ||
+    (row.grant.status === 'revoked' && row.grant.revoked_source === 'shop')
+  )
+}
+
+function getKebabMenuItems(row: SystemAddonRow): NeDropdownItem[] {
+  const items: NeDropdownItem[] = []
+
+  if (!isAddonAdmin() || isSystemBlocked.value) {
+    return items
+  }
+
+  if (!row.grant) {
+    items.push({
+      id: 'activate',
+      label: t('addons.activate'),
+      icon: faCircleCheck,
+      action: () => showActionModal(row, 'activate'),
+    })
+  } else if (row.grant.status === 'active') {
+    items.push({
+      id: 'revoke',
+      label: t('addons.revoke'),
+      icon: faBan,
+      danger: true,
+      action: () => showActionModal(row, 'revoke'),
+    })
+  } else if (row.grant.status === 'revoked') {
+    // restoring only clears the revocation: on an expired grant it would
+    // change nothing, so it is not offered there
+    items.push({
+      id: 'reactivate',
+      label: t('addons.reactivate'),
+      icon: faCircleCheck,
+      action: () => showActionModal(row, 'reactivate'),
+    })
+  }
+
+  return items
+}
+
+function openShop(row: SystemAddonRow) {
+  window.open(getBuyUrl(systemDetail.value.data?.system_key ?? '', row), '_blank')
+}
+
+// Dates only: a licence period is counted in days, so the time of day is noise.
+function formatValidity(row: SystemAddonRow) {
+  // A grant awaiting payment has no period yet — the backend marks the stub by
+  // setting valid_until to valid_from, which would otherwise read as a licence
+  // that expired the day it started.
+  if (!row.grant || row.grant.status === 'pending') {
+    return '-'
+  }
+  const from = formatDateNoTime(new Date(row.grant.valid_from), locale.value)
+  const until = row.grant.valid_until
+    ? formatDateNoTime(new Date(row.grant.valid_until), locale.value)
+    : t('addons.never_expires')
+
+  return `${from} - ${until}`
+}
+</script>
+
+<template>
+  <div>
+    <!-- back link + add-on name -->
+    <div class="mb-8 flex flex-col items-start gap-2">
+      <NeButton kind="tertiary" class="-ml-2.5" @click="emit('back')">
+        <template #prefix>
+          <FontAwesomeIcon :icon="faArrowLeft" class="size-4" aria-hidden="true" />
+        </template>
+        {{ $t('addons.back_to_addons') }}
+      </NeButton>
+      <div class="flex w-full items-center justify-between gap-4">
+        <NeSkeleton v-if="loading" size="lg" class="w-xs" />
+        <h4 v-else class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ addonName }}</h4>
+        <!-- with no filter row to host it, the indicator sits next to the title:
+             it is shorter than the heading, so appearing shifts nothing -->
+        <UpdatingSpinner v-if="!areFiltersShown && refreshing" />
+      </div>
+    </div>
+    <!-- filters: dropped for a single row, where they would be busywork -->
+    <div v-if="areFiltersShown" class="mb-6 flex w-full items-end justify-between gap-4">
+      <div class="flex flex-wrap items-center gap-4">
+        <NeTextInput
+          v-model="textFilter"
+          is-search
+          :placeholder="$t('addons.filter_applications')"
+          class="max-w-48 sm:max-w-sm"
+          @blur="textFilter = textFilter.trim()"
+        />
+        <NeDropdownFilterV2
+          v-model="purchaserFilter"
+          kind="checkbox"
+          :label="t('addons.purchased_by')"
+          :options="purchaserFilterOptions"
+          show-options-filter
+          :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+          :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+          :no-options-label="t('ne_dropdown_filter.no_options')"
+          :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+          :clear-search-label="t('ne_dropdown_filter.clear_search')"
+          :options-filter-placeholder="t('ne_dropdown_filter.options_filter_placeholder')"
+        />
+        <NeDropdownFilterV2
+          v-model="statusFilter"
+          kind="checkbox"
+          :label="t('addons.status')"
+          :options="statusFilterOptions"
+          :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+          :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+          :no-options-label="t('ne_dropdown_filter.no_options')"
+          :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+          :clear-search-label="t('ne_dropdown_filter.clear_search')"
+          :options-filter-placeholder="t('ne_dropdown_filter.options_filter_placeholder')"
+        />
+        <NeButton kind="tertiary" @click="clearFilters">
+          {{ t('common.clear_filters') }}
+        </NeButton>
+      </div>
+      <UpdatingSpinner v-if="refreshing" />
+    </div>
+    <!-- no application matching filter -->
+    <NeEmptyState
+      v-if="isNoMatchEmptyStateShown"
+      :title="$t('addons.no_applications_found')"
+      :description="$t('common.try_changing_search_filters')"
+      :icon="faMagnifyingGlass"
+      class="bg-white dark:bg-gray-950"
+    >
+      <NeButton kind="tertiary" @click="clearFilters">
+        {{ $t('common.clear_filters') }}
+      </NeButton>
+    </NeEmptyState>
+    <NeTable
+      v-else
+      :aria-label="addonName"
+      card-breakpoint="2xl"
+      :loading="loading"
+      :skeleton-columns="6"
+      :skeleton-rows="7"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ firstColumnLabel }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('addons.order') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('addons.purchased_by') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('addons.validity') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('addons.status') }}</NeTableHeadCell>
+        <NeTableHeadCell>
+          <!-- no header for actions -->
+        </NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="row in paginatedRows" :key="`${row.addon.id} ${row.scope}`">
+          <NeTableCell :data-label="firstColumnLabel">
+            <div class="flex items-center gap-2">
+              <ApplicationLogo v-if="row.applicationId" :app="row.applicationId" />
+              <SystemLogo v-else :system="systemDetail.data?.type ?? 'nsec'" />
+              <span>{{ row.applicationLabel }}</span>
+            </div>
+          </NeTableCell>
+          <NeTableCell :data-label="$t('addons.order')">
+            <!-- with no grant there is no order to name: the Status column is
+                 where "not purchased" is said -->
+            <span v-if="!row.grant">-</span>
+            <a
+              v-else-if="getOrderNumber(row.grant)"
+              :href="getOrderUrl(row.grant, isAddonAdmin())"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-primary-700 dark:text-primary-500 hover:underline"
+            >
+              #{{ getOrderNumber(row.grant) }}
+            </a>
+            <span v-else class="text-tertiary-neutral italic">
+              {{ $t('addons.manually_created') }}
+            </span>
+          </NeTableCell>
+          <NeTableCell :data-label="$t('addons.purchased_by')">
+            <div v-if="getPurchaserName(row)" class="flex items-center gap-2">
+              <UserAvatar
+                size="sm"
+                :is-owner="false"
+                :name="getPurchaserName(row)"
+                :logto-id="row.grant?.purchased_by?.logto_id ?? ''"
+              />
+              <span>{{ getPurchaserName(row) }}</span>
+            </div>
+            <span v-else-if="row.grant?.purchased_by?.out_of_scope" class="text-tertiary-neutral">
+              {{ $t('addons.purchaser_not_visible') }}
+            </span>
+            <div v-else-if="row.grant?.created_by?.user_name" class="flex items-center gap-2">
+              <UserAvatar
+                size="sm"
+                :is-owner="false"
+                :name="row.grant.created_by.user_name"
+                :logto-id="row.grant.created_by.user_id ?? ''"
+              />
+              <div>
+                <div class="text-tertiary-neutral text-xs">{{ $t('addons.created_by') }}</div>
+                <div>{{ row.grant.created_by.user_name }}</div>
+              </div>
+            </div>
+            <span v-else>-</span>
+          </NeTableCell>
+          <NeTableCell :data-label="$t('addons.validity')">
+            {{ formatValidity(row) }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('addons.status')">
+            <AddonStatusIcon :status="getRowStatus(row)" />
+          </NeTableCell>
+          <NeTableCell :data-label="$t('common.actions')">
+            <div class="-ml-2.5 flex gap-2 2xl:ml-0 2xl:justify-end">
+              <!-- when buying is the only thing on offer it gets a button of its
+                   own rather than hiding inside a one-item kebab -->
+              <NeButton
+                v-if="canBuy(row) && !getKebabMenuItems(row).length"
+                kind="tertiary"
+                @click="openShop(row)"
+              >
+                <template #prefix>
+                  <FontAwesomeIcon
+                    :icon="faArrowUpRightFromSquare"
+                    class="size-4"
+                    aria-hidden="true"
+                  />
+                </template>
+                {{ $t('addons.buy') }}
+              </NeButton>
+              <NeDropdown
+                v-else-if="getKebabMenuItems(row).length || canBuy(row)"
+                :items="[
+                  ...getKebabMenuItems(row),
+                  ...(canBuy(row)
+                    ? [
+                        {
+                          id: 'buy',
+                          label: t('addons.buy'),
+                          icon: faArrowUpRightFromSquare,
+                          action: () => openShop(row),
+                        },
+                      ]
+                    : []),
+                ]"
+                :align-to-right="true"
+                :open-menu-aria-label="$t('ne_dropdown.open_menu')"
+              />
+            </div>
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template #paginator>
+        <NePaginator
+          :current-page="pageNum"
+          :total-rows="filteredRows.length"
+          :page-size="pageSize"
+          :page-sizes="PAGE_SIZE_OPTIONS"
+          :nav-pagination-label="$t('ne_table.pagination')"
+          :next-label="$t('ne_table.go_to_next_page')"
+          :previous-label="$t('ne_table.go_to_previous_page')"
+          :range-of-total-label="$t('ne_table.of')"
+          :page-size-label="$t('ne_table.show')"
+          @select-page="
+            (page: number) => {
+              pageNum = page
+            }
+          "
+          @select-page-size="
+            (size: number) => {
+              pageSize = size
+              savePageSizeToStorage(SYSTEM_ADDONS_TABLE_ID, size)
+            }
+          "
+        />
+      </template>
+    </NeTable>
+    <!-- activate / revoke / reactivate modal -->
+    <AddonActionModal
+      :visible="isShownActionModal"
+      :action="currentAction"
+      :row="currentRow"
+      @close="isShownActionModal = false"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/systems/addons/SystemAddonsGrid.vue b/frontend/src/components/systems/addons/SystemAddonsGrid.vue
new file mode 100644
index 000000000..2c90fb902
--- /dev/null
+++ b/frontend/src/components/systems/addons/SystemAddonsGrid.vue
@@ -0,0 +1,227 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  The add-ons of one system, one card per add-on. Rows are grouped here and
+  counted by status for the card to summarise; opening a card hands the add-on
+  id up to the panel, which swaps in the detail table.
+-->
+
+<script setup lang="ts">
+import { faMagnifyingGlass, faPuzzlePiece } from '@fortawesome/free-solid-svg-icons'
+import {
+  NeButton,
+  NeCard,
+  NeDropdownFilterV2,
+  NeEmptyState,
+  NeTextInput,
+  type NeDropdownFilterV2Option,
+} from '@nethesis/vue-components'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import UpdatingSpinner from '@/components/common/UpdatingSpinner.vue'
+import { getApplicationDisplayName } from '@/lib/addons/addons'
+import {
+  ADDON_ROW_STATUSES,
+  getRowStatus,
+  type AddonRowStatus,
+  type SystemAddonRow,
+} from '@/lib/addons/systemAddons'
+import { MIN_SEARCH_LENGTH } from '@/lib/common'
+import SystemAddonCard from './SystemAddonCard.vue'
+
+// enough cards to fill the widest row while the three queries land
+const SKELETON_CARDS = 4
+
+const { rows, loading, refreshing } = defineProps<{
+  rows: SystemAddonRow[]
+  loading: boolean
+  refreshing: boolean
+}>()
+
+const emit = defineEmits<{ open: [addonId: string] }>()
+
+const { t } = useI18n()
+
+const textFilter = ref('')
+const debouncedTextFilter = ref('')
+const applicationFilter = ref<NeDropdownFilterV2Option[]>([])
+const statusFilter = ref<NeDropdownFilterV2Option[]>([])
+
+// One card per add-on, over every place it applies to.
+const cards = computed(() => {
+  const groups = new Map<
+    string,
+    {
+      addon: SystemAddonRow['addon']
+      applicationId: string
+      scoped: boolean
+      counts: Record<AddonRowStatus, number>
+    }
+  >()
+
+  for (const row of rows) {
+    let group = groups.get(row.addon.id)
+
+    if (!group) {
+      group = {
+        addon: row.addon,
+        applicationId: row.applicationId,
+        // a service covers the whole system: one place, nothing to count
+        scoped: row.addon.kind === 'module',
+        counts: Object.fromEntries(ADDON_ROW_STATUSES.map((status) => [status, 0])) as Record<
+          AddonRowStatus,
+          number
+        >,
+      }
+      groups.set(row.addon.id, group)
+    }
+    group.counts[getRowStatus(row)] += 1
+  }
+
+  return [...groups.values()].sort((a, b) =>
+    a.addon.display_name.localeCompare(b.addon.display_name),
+  )
+})
+
+const applicationFilterOptions = computed((): NeDropdownFilterV2Option[] => {
+  const applications = new Set(
+    cards.value.map((card) => card.applicationId).filter((application) => !!application),
+  )
+
+  return [...applications]
+    .map((application) => ({ id: application, label: getApplicationDisplayName(application) }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+})
+
+const statusFilterOptions = computed((): NeDropdownFilterV2Option[] =>
+  ADDON_ROW_STATUSES.map((status) => ({ id: status, label: t(`addons.status_${status}`) })),
+)
+
+const filteredCards = computed(() => {
+  const search = debouncedTextFilter.value.trim().toLowerCase()
+  const applications = applicationFilter.value.map((option) => option.id)
+  const statuses = statusFilter.value.map((option) => option.id)
+
+  return cards.value.filter((card) => {
+    if (applications.length && !applications.includes(card.applicationId)) {
+      return false
+    }
+    // a card matches a status when at least one of its places is in it
+    if (statuses.length && !statuses.some((status) => card.counts[status as AddonRowStatus] > 0)) {
+      return false
+    }
+    if (
+      search &&
+      !`${card.addon.display_name} ${card.addon.description}`.toLowerCase().includes(search)
+    ) {
+      return false
+    }
+    return true
+  })
+})
+
+const isNoDataEmptyStateShown = computed(() => !loading && !cards.value.length)
+
+const isNoMatchEmptyStateShown = computed(
+  () => !loading && !!cards.value.length && !filteredCards.value.length,
+)
+
+watch(
+  () => textFilter.value,
+  useDebounceFn(() => {
+    // debounce and ignore if text filter is too short
+    if (textFilter.value.length === 0 || textFilter.value.length >= MIN_SEARCH_LENGTH) {
+      debouncedTextFilter.value = textFilter.value
+    }
+  }, 500),
+)
+
+function clearFilters() {
+  textFilter.value = ''
+  debouncedTextFilter.value = ''
+  applicationFilter.value = []
+  statusFilter.value = []
+}
+</script>
+
+<template>
+  <div>
+    <!-- filters -->
+    <div class="mb-6 flex w-full items-end justify-between gap-4">
+      <div class="flex flex-wrap items-center gap-4">
+        <NeTextInput
+          v-model="textFilter"
+          is-search
+          :placeholder="$t('addons.filter_addons')"
+          class="max-w-48 sm:max-w-sm"
+          @blur="textFilter = textFilter.trim()"
+        />
+        <NeDropdownFilterV2
+          v-model="applicationFilter"
+          kind="checkbox"
+          :label="t('addons.application_type')"
+          :options="applicationFilterOptions"
+          :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+          :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+          :no-options-label="t('ne_dropdown_filter.no_options')"
+          :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+          :clear-search-label="t('ne_dropdown_filter.clear_search')"
+          :options-filter-placeholder="t('ne_dropdown_filter.options_filter_placeholder')"
+        />
+        <NeDropdownFilterV2
+          v-model="statusFilter"
+          kind="checkbox"
+          :label="t('addons.status')"
+          :options="statusFilterOptions"
+          :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+          :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+          :no-options-label="t('ne_dropdown_filter.no_options')"
+          :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+          :clear-search-label="t('ne_dropdown_filter.clear_search')"
+          :options-filter-placeholder="t('ne_dropdown_filter.options_filter_placeholder')"
+        />
+        <NeButton kind="tertiary" @click="clearFilters">
+          {{ t('common.clear_filters') }}
+        </NeButton>
+      </div>
+      <UpdatingSpinner v-if="refreshing" />
+    </div>
+    <!-- skeleton cards -->
+    <div v-if="loading" class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2 2xl:grid-cols-4">
+      <NeCard v-for="index in SKELETON_CARDS" :key="index" loading :skeleton-lines="6" />
+    </div>
+    <!-- no add-ons for this system at all -->
+    <NeEmptyState
+      v-else-if="isNoDataEmptyStateShown"
+      :title="$t('addons.no_system_addons')"
+      :description="$t('addons.no_system_addons_description')"
+      :icon="faPuzzlePiece"
+      class="bg-white dark:bg-gray-950"
+    />
+    <!-- no add-on matching filter -->
+    <NeEmptyState
+      v-else-if="isNoMatchEmptyStateShown"
+      :title="$t('addons.no_addons_found')"
+      :description="$t('common.try_changing_search_filters')"
+      :icon="faMagnifyingGlass"
+      class="bg-white dark:bg-gray-950"
+    >
+      <NeButton kind="tertiary" @click="clearFilters">
+        {{ $t('common.clear_filters') }}
+      </NeButton>
+    </NeEmptyState>
+    <div v-else class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2 2xl:grid-cols-4">
+      <SystemAddonCard
+        v-for="card in filteredCards"
+        :key="card.addon.id"
+        :addon="card.addon"
+        :application-id="card.applicationId"
+        :counts="card.counts"
+        :scoped="card.scoped"
+        @details="emit('open', card.addon.id)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 3b56ebf82..2a66d3109 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -881,7 +881,58 @@
     "application_cannot_be_empty": "Choose an application",
     "display_name_cannot_be_empty": "Display name cannot be empty",
     "technical_name_cannot_be_empty": "Technical name cannot be empty",
-    "technical_name_is_invalid": "Technical name can only contain lowercase letters, numbers and hyphens"
+    "technical_name_is_invalid": "Technical name can only contain lowercase letters, numbers and hyphens",
+    "system_addons_description": "Add-ons available for this system. Purchases made on NethShop appear here automatically. Open an add-on to see its status, validity and originating order.",
+    "cannot_retrieve_system_addons": "Cannot retrieve the add-ons of this system",
+    "cannot_retrieve_available_addons": "Cannot retrieve available add-ons",
+    "cannot_retrieve_applications": "Cannot retrieve the applications of this system",
+    "no_system_addons": "No add-ons available",
+    "no_system_addons_description": "There are no add-ons available for this system.",
+    "no_applications_found": "No applications found",
+    "filter_applications": "Filter applications",
+    "application_type": "Application type",
+    "status": "Status",
+    "order": "Order",
+    "purchased_by": "Purchased by",
+    "validity": "Validity",
+    "details": "Details",
+    "back_to_addons": "Back to add-ons",
+    "buy": "Buy",
+    "manually_created": "Manually created",
+    "created_by": "Created by",
+    "never_expires": "Never expires",
+    "purchaser_not_visible": "Not visible",
+    "status_active": "Active",
+    "status_pending": "Pending payment",
+    "status_suspended": "Suspended",
+    "status_revoked": "Revoked",
+    "status_expired": "Expired",
+    "status_not_purchased": "Not purchased",
+    "active_on_n_applications": "Active on {n} application | Active on {n} applications",
+    "pending_on_n_applications": "Pending payment on {n} application | Pending payment on {n} applications",
+    "suspended_on_n_applications": "Suspended on {n} application | Suspended on {n} applications",
+    "revoked_on_n_applications": "Revoked on {n} application | Revoked on {n} applications",
+    "expired_on_n_applications": "Expired on {n} application | Expired on {n} applications",
+    "not_purchased_on_n_applications": "Not purchased on {n} application | Not purchased on {n} applications",
+    "activate": "Activate",
+    "revoke": "Revoke",
+    "reactivate": "Reactivate",
+    "activate_addon": "Activate add-on",
+    "revoke_addon": "Revoke add-on",
+    "reactivate_addon": "Reactivate add-on",
+    "activate_addon_confirmation": "{name} will be activated for {application}, without a NethShop purchase.",
+    "revoke_addon_confirmation": "{application} will lose access to {name}.",
+    "reactivate_addon_confirmation": "{name} will be reactivated for {application}.",
+    "addon_activated": "Add-on activated",
+    "addon_revoked": "Add-on revoked",
+    "addon_reactivated": "Add-on reactivated",
+    "addon_activated_successfully": "Add-on {name} has been activated for {application}",
+    "addon_revoked_successfully": "Add-on {name} has been revoked for {application}",
+    "addon_reactivated_successfully": "Add-on {name} has been reactivated for {application}",
+    "cannot_activate_addon": "Cannot activate add-on",
+    "cannot_revoke_addon": "Cannot revoke add-on",
+    "cannot_reactivate_addon": "Cannot reactivate add-on",
+    "addon_already_granted": "This add-on has already been granted here. Reload the page to see the current state."
   },
   "forbidden": {
     "title": "Restricted page",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 77a4df89f..f97f542be 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -808,7 +808,58 @@
     "application_cannot_be_empty": "Scegli un'applicazione",
     "display_name_cannot_be_empty": "Il nome visualizzato non può essere vuoto",
     "technical_name_cannot_be_empty": "Il nome tecnico non può essere vuoto",
-    "technical_name_is_invalid": "Il nome tecnico può contenere solo lettere minuscole, numeri e trattini"
+    "technical_name_is_invalid": "Il nome tecnico può contenere solo lettere minuscole, numeri e trattini",
+    "system_addons_description": "Add-on disponibili per questo sistema. Gli acquisti effettuati su NethShop compaiono qui automaticamente. Apri un add-on per vederne stato, validità e ordine di origine.",
+    "cannot_retrieve_system_addons": "Impossibile recuperare gli add-on di questo sistema",
+    "cannot_retrieve_available_addons": "Impossibile recuperare gli add-on disponibili",
+    "cannot_retrieve_applications": "Impossibile recuperare le applicazioni di questo sistema",
+    "no_system_addons": "Nessun add-on disponibile",
+    "no_system_addons_description": "Non ci sono add-on disponibili per questo sistema.",
+    "no_applications_found": "Nessuna applicazione trovata",
+    "filter_applications": "Filtra applicazioni",
+    "application_type": "Tipo di applicazione",
+    "status": "Stato",
+    "order": "Ordine",
+    "purchased_by": "Acquistato da",
+    "validity": "Validità",
+    "details": "Dettagli",
+    "back_to_addons": "Torna agli add-on",
+    "buy": "Acquista",
+    "manually_created": "Creato manualmente",
+    "created_by": "Creato da",
+    "never_expires": "Non scade mai",
+    "purchaser_not_visible": "Non visibile",
+    "status_active": "Attivo",
+    "status_pending": "In attesa di pagamento",
+    "status_suspended": "Sospeso",
+    "status_revoked": "Revocato",
+    "status_expired": "Scaduto",
+    "status_not_purchased": "Non acquistato",
+    "active_on_n_applications": "Attivo su {n} applicazione | Attivo su {n} applicazioni",
+    "pending_on_n_applications": "In attesa di pagamento su {n} applicazione | In attesa di pagamento su {n} applicazioni",
+    "suspended_on_n_applications": "Sospeso su {n} applicazione | Sospeso su {n} applicazioni",
+    "revoked_on_n_applications": "Revocato su {n} applicazione | Revocato su {n} applicazioni",
+    "expired_on_n_applications": "Scaduto su {n} applicazione | Scaduto su {n} applicazioni",
+    "not_purchased_on_n_applications": "Non acquistato su {n} applicazione | Non acquistato su {n} applicazioni",
+    "activate": "Attiva",
+    "revoke": "Revoca",
+    "reactivate": "Riattiva",
+    "activate_addon": "Attiva add-on",
+    "revoke_addon": "Revoca add-on",
+    "reactivate_addon": "Riattiva add-on",
+    "activate_addon_confirmation": "{name} sarà attivato per {application}, senza un acquisto su NethShop.",
+    "revoke_addon_confirmation": "{application} perderà l'accesso a {name}.",
+    "reactivate_addon_confirmation": "{name} sarà riattivato per {application}.",
+    "addon_activated": "Add-on attivato",
+    "addon_revoked": "Add-on revocato",
+    "addon_reactivated": "Add-on riattivato",
+    "addon_activated_successfully": "L'add-on {name} è stato attivato per {application}",
+    "addon_revoked_successfully": "L'add-on {name} è stato revocato per {application}",
+    "addon_reactivated_successfully": "L'add-on {name} è stato riattivato per {application}",
+    "cannot_activate_addon": "Impossibile attivare l'add-on",
+    "cannot_revoke_addon": "Impossibile revocare l'add-on",
+    "cannot_reactivate_addon": "Impossibile riattivare l'add-on",
+    "addon_already_granted": "Questo add-on è già assegnato qui. Ricarica la pagina per vedere lo stato attuale."
   },
   "forbidden": {
     "title": "Pagina riservata",
diff --git a/frontend/src/lib/addons/systemAddons.ts b/frontend/src/lib/addons/systemAddons.ts
new file mode 100644
index 000000000..e20cb4fc6
--- /dev/null
+++ b/frontend/src/lib/addons/systemAddons.ts
@@ -0,0 +1,311 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import axios from 'axios'
+import { API_URL, SHOP_BASE_URL } from '../config'
+import { useLoginStore } from '@/stores/login'
+import { getDisplayName, type Application } from '../applications/applications'
+import type { Addon } from './addons'
+
+export const SYSTEM_ADDONS_KEY = 'systemAddons'
+export const AVAILABLE_ADDONS_KEY = 'availableAddons'
+export const SYSTEM_ADDONS_TABLE_ID = 'systemAddonsTable'
+
+// The wire paths are still named "entitlements": that is the backend contract.
+// Everything on this side is an add-on.
+const systemAddonsPath = (systemId: string) => `systems/${systemId}/entitlements`
+const AVAILABLE_ADDONS_PATH = 'entitlements/available'
+
+// Server-computed lifecycle of a grant, in the backend's own precedence order:
+// suspended > active > pending > revoked > expired. `suspended` is not a state
+// of the grant itself — it means the owning system (or its organization) is
+// suspended or deleted and cannot use anything it holds.
+export const ADDON_STATUSES = ['active', 'pending', 'suspended', 'revoked', 'expired'] as const
+export type AddonStatus = (typeof ADDON_STATUSES)[number]
+
+// Audit snapshot of the user who bought the grant on NethShop, frozen at
+// purchase time. Absent for manual grants; `{ email }` only when the shop
+// address matches no My Nethesis user; `{ out_of_scope: true }` when the buyer
+// sits outside the viewer's hierarchy (redacted server-side).
+export interface AddonPurchaser {
+  logto_id?: string
+  name?: string
+  email?: string
+  organization_id?: string
+  organization_name?: string
+  out_of_scope?: boolean
+}
+
+export interface AddonCreator {
+  user_id?: string
+  user_name?: string
+  organization_id?: string
+  organization_name?: string
+  channel?: string
+}
+
+// One add-on granted to one system, optionally narrowed to a single
+// application instance through `scope` ('' = the whole system).
+export interface AddonGrant {
+  id: string
+  system_id: string
+  // the catalog id of the add-on this grant is for
+  entitlement: string
+  scope?: string
+  source: string
+  source_ref?: string
+  valid_from: string
+  valid_until?: string
+  revoked_at?: string
+  // who revoked: 'shop' (subscription cancelled or payment failed — the user
+  // may buy again) or 'manual' (deliberate revocation — restore only)
+  revoked_source?: 'manual' | 'shop'
+  // a shop order placed at checkout whose payment has not landed yet
+  pending_ref?: string
+  pending_since?: string
+  active: boolean
+  status: AddonStatus
+  created_by?: AddonCreator
+  purchased_by?: AddonPurchaser
+  // shop tier of the purchased product line, display only (e.g. "16-30 device")
+  variant?: { id?: number; sku?: string; label?: string }
+  renewal_count?: number
+}
+
+interface Envelope<T> {
+  code: number
+  message: string
+  data: T
+}
+
+const authHeaders = () => {
+  const loginStore = useLoginStore()
+  return { headers: { Authorization: `Bearer ${loginStore.jwtToken}` } }
+}
+
+export const getSystemAddons = (systemId: string) =>
+  axios
+    .get<
+      Envelope<{ entitlements: AddonGrant[] }>
+    >(`${API_URL}/${systemAddonsPath(systemId)}`, authHeaders())
+    .then((res) => res.data.data.entitlements)
+
+// What the caller's organization is allowed to have, after the availability
+// rules the owner configured. Not the full catalog: an add-on missing from
+// here cannot be bought, though an existing grant for it keeps working.
+export const getAvailableAddons = () =>
+  axios
+    .get<Envelope<{ available: Addon[] }>>(`${API_URL}/${AVAILABLE_ADDONS_PATH}`, authHeaders())
+    .then((res) => res.data.data.available)
+
+// Grant an add-on outright, skipping NethShop. Owner organization or Super
+// Admin only, enforced again by the backend. No expiry means perpetual.
+export const grantSystemAddon = (systemId: string, addonId: string, scope: string) =>
+  axios
+    .post<
+      Envelope<AddonGrant>
+    >(`${API_URL}/${systemAddonsPath(systemId)}`, { entitlement: addonId, scope: scope || undefined }, authHeaders())
+    .then((res) => res.data.data)
+
+// Soft revoke: the row stays and records who revoked it, so a later purchase
+// can pick it back up.
+export const revokeSystemAddon = (systemId: string, addonId: string, scope: string) =>
+  axios
+    .delete<
+      Envelope<AddonGrant>
+    >(`${API_URL}/${systemAddonsPath(systemId)}/${addonId}?scope=${encodeURIComponent(scope)}`, authHeaders())
+    .then((res) => res.data.data)
+
+// Clears revoked_at/revoked_source. Note this does not touch valid_until, so
+// restoring a grant that had also expired leaves it expired — which is why the
+// UI only offers it for status 'revoked'.
+export const restoreSystemAddon = (systemId: string, addonId: string, scope: string) =>
+  axios
+    .put<
+      Envelope<AddonGrant>
+    >(`${API_URL}/${systemAddonsPath(systemId)}/${addonId}?scope=${encodeURIComponent(scope)}`, { revoked: false }, authHeaders())
+    .then((res) => res.data.data)
+
+// ----- rows -----
+
+// One line of the UI: an add-on, the place it applies to, and the grant that
+// covers it if there is one. Services produce a single row for the whole
+// system; modules produce one row per application instance.
+export interface SystemAddonRow {
+  addon: Addon
+  grant?: AddonGrant
+  // '' for a system-wide service, the application instance's module_id otherwise
+  scope: string
+  // the application type (instance_of), '' for a system-wide service
+  applicationId: string
+  // what the Application column shows: the instance label, or the system name
+  applicationLabel: string
+}
+
+// What a place can be in, from the reader's point of view: the five states the
+// backend computes, plus the one it has no record of. Ordered worst-to-best
+// news, which is the order the card lists them in.
+export const ADDON_ROW_STATUSES = [...ADDON_STATUSES, 'not_purchased'] as const
+export type AddonRowStatus = (typeof ADDON_ROW_STATUSES)[number]
+
+// One vocabulary for the whole feature: the card counts these and the detail
+// table names them one row at a time. Summarising several of them as
+// "inactive" would have the card contradict the table it opens onto.
+export const getRowStatus = (row: SystemAddonRow): AddonRowStatus =>
+  row.grant?.status ?? 'not_purchased'
+
+interface ComposeRowsArgs {
+  availableAddons: Addon[]
+  grants: AddonGrant[]
+  applications: Application[]
+  systemType: string
+  systemName: string
+}
+
+// The grant list carries no catalog information and the application instances
+// live in a different endpoint again, so the three are joined here. The
+// backend model is flat — one row per (system, add-on, scope) — and the
+// two-level shape the UI shows is built entirely from that.
+export const composeSystemAddonRows = ({
+  availableAddons,
+  grants,
+  applications,
+  systemType,
+  systemName,
+}: ComposeRowsArgs): SystemAddonRow[] => {
+  const findGrant = (addonId: string, scope: string) =>
+    grants.find((grant) => grant.entitlement === addonId && (grant.scope ?? '') === scope)
+
+  const rows: SystemAddonRow[] = []
+
+  // System-wide services, limited to the ones that apply to this product.
+  const services = availableAddons.filter(
+    (addon) =>
+      addon.kind === 'service' &&
+      (!addon.system_type || !systemType || addon.system_type === systemType),
+  )
+
+  for (const addon of services) {
+    rows.push({
+      addon,
+      grant: findGrant(addon.id, ''),
+      scope: '',
+      applicationId: '',
+      applicationLabel: systemName,
+    })
+  }
+
+  // Modules only exist on a NethServer cluster, one row per application
+  // instance: a module belongs to an application when its catalog id is
+  // prefixed with that application's type. Longest prefix wins, so a
+  // "nethvoice-proxy-*" module is not read as belonging to "nethvoice".
+  if (systemType === 'ns8') {
+    const modules = availableAddons.filter((addon) => addon.kind === 'module')
+    const instances = [...applications].sort((a, b) => a.module_id.localeCompare(b.module_id))
+    const applicationTypes = [...new Set(instances.map((app) => app.instance_of))].sort(
+      (a, b) => b.length - a.length,
+    )
+    const ownerOf = new Map(
+      modules.map((module) => [
+        module.id,
+        applicationTypes.find((type) => module.id.startsWith(`${type}-`)) ?? '',
+      ]),
+    )
+
+    for (const application of instances) {
+      for (const addon of modules.filter(
+        (module) => ownerOf.get(module.id) === application.instance_of,
+      )) {
+        rows.push({
+          addon,
+          grant: findGrant(addon.id, application.module_id),
+          scope: application.module_id,
+          applicationId: application.instance_of,
+          applicationLabel: getDisplayName(application),
+        })
+      }
+    }
+  }
+
+  // Grants nothing above accounts for — legacy imports, add-ons an
+  // availability rule has since restricted away — still deserve a row rather
+  // than vanishing from a page that claims to list what the system holds.
+  const covered = new Set(rows.map((row) => `${row.addon.id} ${row.scope}`))
+
+  for (const grant of grants) {
+    const scope = grant.scope ?? ''
+
+    if (covered.has(`${grant.entitlement} ${scope}`)) {
+      continue
+    }
+
+    const application = applications.find((app) => app.module_id === scope)
+    // Usually the add-on is perfectly well known and was only skipped above
+    // because it does not apply to this product — an nsec service granted to a
+    // cluster, say. Falling straight through to a synthetic entry would show
+    // the user a raw id when a display name was right there.
+    const known = availableAddons.find((addon) => addon.id === grant.entitlement)
+
+    rows.push({
+      addon: known ?? {
+        // nothing to read a name from, so the id has to stand in
+        id: grant.entitlement,
+        display_name: grant.entitlement,
+        description: '',
+        scoped: !!scope,
+        kind: scope ? 'module' : 'service',
+        created_at: '',
+        updated_at: '',
+      },
+      grant,
+      scope,
+      applicationId: application?.instance_of ?? '',
+      applicationLabel: application ? getDisplayName(application) : scope || systemName,
+    })
+  }
+
+  return rows
+}
+
+// ----- NethShop links -----
+
+// The shop's SSO entry point: it signs the user in, then honours redirect_to
+// or completes the purchase.
+const SHOP_ACTIVATE_URL = `${SHOP_BASE_URL}/wp-admin/admin-ajax.php?action=activate`
+
+// The reference shown in the Order column: the order awaiting payment while
+// pending, the originating order otherwise.
+export const getGrantRef = (grant: AddonGrant) =>
+  grant.status === 'pending' ? grant.pending_ref : grant.source_ref
+
+export const getOrderNumber = (grant: AddonGrant) =>
+  getGrantRef(grant)?.match(/^wc-order-(\d+)$/)?.[1] ?? ''
+
+// Buyers open their own order in the customer area; add-on admins are shop
+// Administrators and open the backoffice editor, because the customer page
+// rejects orders that are not theirs.
+export const getOrderUrl = (grant: AddonGrant, isAdmin: boolean) => {
+  const orderNumber = getOrderNumber(grant)
+
+  if (!orderNumber) {
+    return ''
+  }
+
+  const target = isAdmin
+    ? `${SHOP_BASE_URL}/wp-admin/post.php?post=${orderNumber}&action=edit`
+    : `${SHOP_BASE_URL}/mio-account/view-order/${orderNumber}/`
+
+  return `${SHOP_ACTIVATE_URL}&redirect_to=${encodeURIComponent(target)}`
+}
+
+export const getBuyUrl = (systemKey: string, row: SystemAddonRow) => {
+  let url = `${SHOP_ACTIVATE_URL}&system_key=${encodeURIComponent(systemKey)}&entitlement=${encodeURIComponent(row.addon.id)}`
+
+  if (row.scope) {
+    url += `&scope=${encodeURIComponent(row.scope)}`
+  }
+  // Explicit return page for the shop's "back to My Nethesis" link: the
+  // Referer header cannot carry it, since strict-origin-when-cross-origin
+  // strips the path on cross-origin navigations.
+  return `${url}&return_url=${encodeURIComponent(window.location.href)}`
+}
diff --git a/frontend/src/lib/dateTime.test.ts b/frontend/src/lib/dateTime.test.ts
index 4a5fbaa2f..7fcad8959 100644
--- a/frontend/src/lib/dateTime.test.ts
+++ b/frontend/src/lib/dateTime.test.ts
@@ -1,7 +1,13 @@
 //  Copyright (C) 2025 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-import { formatMinutes, formatSeconds, formatTimeNoSeconds, formatUptime } from './dateTime'
+import {
+  formatDateNoTime,
+  formatMinutes,
+  formatSeconds,
+  formatTimeNoSeconds,
+  formatUptime,
+} from './dateTime'
 import { expect, it, describe, vi, beforeEach } from 'vitest'
 
 // Create a simple mock function for translation
@@ -24,6 +30,25 @@ const mockT = vi.fn((key: string, count?: number) => {
   return key
 })
 
+describe('formatDateNoTime', () => {
+  it('should format the date without any time', () => {
+    const date = new Date('2025-10-03T09:30:45Z')
+    const result = formatDateNoTime(date, 'en-US', 'UTC')
+
+    expect(result).toContain('2025')
+    expect(result).toContain('Oct')
+    expect(result).toContain('03')
+    expect(result).not.toContain('09')
+    expect(result).not.toContain('30')
+  })
+
+  it('should localize the month name', () => {
+    const date = new Date('2025-08-06T12:00:00Z')
+
+    expect(formatDateNoTime(date, 'it-IT', 'UTC')).toContain('ago')
+  })
+})
+
 describe('formatTimeNoSeconds', () => {
   it('should format time without seconds', () => {
     const date = new Date('2025-10-03T09:30:45Z')
diff --git a/frontend/src/lib/dateTime.ts b/frontend/src/lib/dateTime.ts
index 22b5c6257..dd9173b9d 100644
--- a/frontend/src/lib/dateTime.ts
+++ b/frontend/src/lib/dateTime.ts
@@ -25,6 +25,18 @@ function getTimeZoneOptions(timeZone?: string): Intl.DateTimeFormatOptions {
   }
 }
 
+// The calendar day on its own, matching the date half of
+// formatDateTimeNoSeconds: "Aug 06, 2026" in English, "06 ago 2026" in
+// Italian. For values where the time of day carries no meaning.
+export function formatDateNoTime(dateTime: Date, locale: string, timeZone?: string): string {
+  return dateTime.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+    ...getTimeZoneOptions(timeZone),
+  })
+}
+
 export function formatTimeNoSeconds(dateTime: Date, locale: string, timeZone?: string): string {
   return dateTime.toLocaleTimeString(locale, {
     hour: '2-digit',
diff --git a/frontend/src/lib/permissions.ts b/frontend/src/lib/permissions.ts
index 1a4af6eb6..fcc88c99c 100644
--- a/frontend/src/lib/permissions.ts
+++ b/frontend/src/lib/permissions.ts
@@ -162,3 +162,8 @@ export const canManageAddons = () => {
 // distributor takes part in: owner organization or Super Admin only. Mirrors
 // the backend isEntitlementAdmin gate on the catalog write endpoints.
 export const isAddonAdmin = () => hasOwnerLevelAuthority()
+
+// Buying an add-on on NethShop is what a distributor, reseller or customer
+// does; owner-level users grant it outright instead, so offering them the shop
+// on top would be a second way to do a thing they already did better.
+export const canBuyAddons = () => canManageAddons() && !isAddonAdmin()
diff --git a/frontend/src/queries/addons/systemAddons.ts b/frontend/src/queries/addons/systemAddons.ts
new file mode 100644
index 000000000..84e4ea5ba
--- /dev/null
+++ b/frontend/src/queries/addons/systemAddons.ts
@@ -0,0 +1,68 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { defineQuery, useQuery } from '@pinia/colada'
+import { useRoute } from 'vue-router'
+import {
+  AVAILABLE_ADDONS_KEY,
+  SYSTEM_ADDONS_KEY,
+  getAvailableAddons,
+  getSystemAddons,
+} from '@/lib/addons/systemAddons'
+import { APPLICATIONS_KEY, getApplications } from '@/lib/applications/applications'
+import { useLoginStore } from '@/stores/login'
+
+// Every application instance of the system in one request: the add-ons panel
+// needs the whole set to build its rows, and a cluster never has enough
+// instances to page through.
+const SYSTEM_APPLICATIONS_PAGE_SIZE = 200
+
+export const useSystemAddons = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const route = useRoute()
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [SYSTEM_ADDONS_KEY, route.params.systemId as string],
+    enabled: () => !!loginStore.jwtToken && !!route.params.systemId,
+    query: () => getSystemAddons(route.params.systemId as string),
+  })
+
+  return { ...rest, state, asyncStatus }
+})
+
+export const useAvailableAddons = defineQuery(() => {
+  const loginStore = useLoginStore()
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [AVAILABLE_ADDONS_KEY],
+    enabled: () => !!loginStore.jwtToken,
+    query: () => getAvailableAddons(),
+  })
+
+  return { ...rest, state, asyncStatus }
+})
+
+export const useSystemApplications = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const route = useRoute()
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [APPLICATIONS_KEY, 'system', route.params.systemId as string],
+    enabled: () => !!loginStore.jwtToken && !!route.params.systemId,
+    query: () =>
+      getApplications(
+        1,
+        SYSTEM_APPLICATIONS_PAGE_SIZE,
+        '',
+        [],
+        [],
+        [route.params.systemId as string],
+        [],
+        false,
+        'module_id',
+        false,
+      ),
+  })
+
+  return { ...rest, state, asyncStatus }
+})
diff --git a/frontend/src/views/SystemDetailView.vue b/frontend/src/views/SystemDetailView.vue
index 9f3524f6f..3ba04a2ab 100644
--- a/frontend/src/views/SystemDetailView.vue
+++ b/frontend/src/views/SystemDetailView.vue
@@ -8,26 +8,43 @@ import { NeHeading, NeInlineNotification, NeSkeleton, NeTabs } from '@nethesis/v
 /*//// import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons' */
 import PageBreadcrumb from '@/components/common/PageBreadcrumb.vue'
-import { canReadSystems } from '@/lib/permissions'
+import { canReadAddons, canReadSystems } from '@/lib/permissions'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 import { useTabs } from '@/composables/useTabs'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import type { Tab } from '@nethesis/vue-components'
 import SystemOverviewPanel from '@/components/systems/SystemOverviewPanel.vue'
 import SystemChangeHistoryPanel from '@/components/systems/SystemChangeHistoryPanel.vue'
 import SystemBackupsPanel from '@/components/systems/SystemBackupsPanel.vue'
 import SystemAlertsPanel from '@/components/systems/SystemAlertsPanel.vue'
+import SystemAddonsPanel from '@/components/systems/SystemAddonsPanel.vue'
 import { useLatestInventory } from '@/queries/systems/latestInventory'
+import { useLoginStore } from '@/stores/login'
 
 const { t } = useI18n()
+const loginStore = useLoginStore()
 const { state: systemDetail } = useSystemDetail()
 const { state: latestInventory } = useLatestInventory()
 // const { state: reachabilityState, asyncStatus: reachabilityAsyncStatus } = useSystemReachability() ////
-const { tabs, selectedTab } = useTabs([
-  { name: 'overview', label: t('system_detail.overview') },
-  { name: 'change_history', label: t('system_detail.change_history') },
-  { name: 'alert_history', label: t('alerts.title') },
-  { name: 'backups', label: t('backups.title') },
-])
+
+// Add-ons are only listed to companies allowed to see what they hold; every
+// other tab is available to anyone who can read the system.
+const tabsConfig = computed((): Tab[] => {
+  const tabs: Tab[] = [
+    { name: 'overview', label: t('system_detail.overview') },
+    { name: 'change_history', label: t('system_detail.change_history') },
+    { name: 'alert_history', label: t('alerts.title') },
+    { name: 'backups', label: t('backups.title') },
+  ]
+
+  if (canReadAddons()) {
+    tabs.push({ name: 'addons', label: t('addons.title') })
+  }
+  return tabs
+})
+
+const { tabs, selectedTab } = useTabs(tabsConfig)
 
 ////
 // const isSystemReachable = computed(() => !!reachabilityState.value.data?.reachable)
@@ -113,7 +130,12 @@ const { tabs, selectedTab } = useTabs([
       :description="$t('system_detail.no_inventory_available_description')"
       class="mb-4"
     />
+    <!-- The tab list is not final until permissions are in: NeTabs falls back
+         to the first tab when the selected one is missing, which would turn a
+         ?tab=addons deep link into ?tab=overview on a cold load. -->
+    <NeSkeleton v-if="loginStore.loadingUserInfo" size="sm" class="mb-8 w-md" />
     <NeTabs
+      v-else
       :tabs="tabs"
       :selected="selectedTab"
       :sr-tabs-label="t('ne_tabs.tabs')"
@@ -125,5 +147,6 @@ const { tabs, selectedTab } = useTabs([
     <SystemChangeHistoryPanel v-else-if="selectedTab === 'change_history'" />
     <SystemAlertsPanel v-else-if="selectedTab === 'alert_history'" />
     <SystemBackupsPanel v-else-if="selectedTab === 'backups'" />
+    <SystemAddonsPanel v-else-if="selectedTab === 'addons'" />
   </div>
 </template>

From cdd8d7db0d8952212fd377c423f91b74a430903d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Tue, 25 Aug 2026 12:35:28 +0200
Subject: [PATCH 03/16] feat(ui): add addons dashboard

---
 .../components/addons/AddonsReportPanel.vue   | 160 ++++++++++++++-
 .../addons/report/AddonActivationsCard.vue    |  80 ++++++++
 .../addons/report/AddonRenewalsCard.vue       |  56 +++++
 .../addons/report/AddonsByAddonCard.vue       | 102 +++++++++
 .../report/AddonsByOrganizationCard.vue       | 117 +++++++++++
 .../addons/report/AddonsByTierCard.vue        | 110 ++++++++++
 .../components/addons/report/ReportCard.vue   |  32 +++
 .../systems/addons/AddonStatusIcon.vue        |  59 +-----
 frontend/src/i18n/en/translation.json         |  35 +++-
 frontend/src/i18n/it/translation.json         |  35 +++-
 frontend/src/lib/addons/addonsReport.ts       | 194 ++++++++++++++++++
 frontend/src/lib/addons/systemAddons.ts       |  47 +++++
 frontend/src/queries/addons/addonsReport.ts   | 141 +++++++++++++
 frontend/src/views/AddonsView.vue             |   4 +-
 14 files changed, 1104 insertions(+), 68 deletions(-)
 create mode 100644 frontend/src/components/addons/report/AddonActivationsCard.vue
 create mode 100644 frontend/src/components/addons/report/AddonRenewalsCard.vue
 create mode 100644 frontend/src/components/addons/report/AddonsByAddonCard.vue
 create mode 100644 frontend/src/components/addons/report/AddonsByOrganizationCard.vue
 create mode 100644 frontend/src/components/addons/report/AddonsByTierCard.vue
 create mode 100644 frontend/src/components/addons/report/ReportCard.vue
 create mode 100644 frontend/src/lib/addons/addonsReport.ts
 create mode 100644 frontend/src/queries/addons/addonsReport.ts

diff --git a/frontend/src/components/addons/AddonsReportPanel.vue b/frontend/src/components/addons/AddonsReportPanel.vue
index 96aea5599..c6e2617a4 100644
--- a/frontend/src/components/addons/AddonsReportPanel.vue
+++ b/frontend/src/components/addons/AddonsReportPanel.vue
@@ -2,21 +2,159 @@
   Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 
-  Placeholder for the add-on report. The backend already exposes the aggregates
-  (/entitlements/report, /report/organizations, /report/tiers); the panel that
-  renders them is not part of this change.
+  The add-on report: what the fleet holds, where it sits and how it is
+  trending. Every figure is scoped server-side to the caller's hierarchy — the
+  owner organization and Super Admins see everything, a reseller only its own
+  companies — so nothing here needs a permission check of its own.
+
+  The totals, the trend, the renewal split and the per-add-on breakdown arrive
+  in one response; the two tables page and search on their own.
 -->
 
 <script setup lang="ts">
-import { NeEmptyState } from '@nethesis/vue-components'
-import { faChartLine } from '@fortawesome/free-solid-svg-icons'
+import {
+  faArrowsRotate,
+  faCalendar,
+  faPuzzlePiece,
+  faServer,
+} from '@fortawesome/free-solid-svg-icons'
+import { NeBadgeV2, NeInlineNotification } from '@nethesis/vue-components'
+import { computed } from 'vue'
+import CounterCard from '@/components/common/CounterCard.vue'
+import { useAddonReport } from '@/queries/addons/addonsReport'
+import { useAddons } from '@/queries/addons/addons'
+import AddonActivationsCard from './report/AddonActivationsCard.vue'
+import AddonRenewalsCard from './report/AddonRenewalsCard.vue'
+import AddonsByAddonCard from './report/AddonsByAddonCard.vue'
+import AddonsByOrganizationCard from './report/AddonsByOrganizationCard.vue'
+import AddonsByTierCard from './report/AddonsByTierCard.vue'
+
+const { state: report } = useAddonReport()
+// only the "by add-on" card needs this, to give add-ons nobody has bought a
+// row; the catalog query is shared with the Catalog tab
+const { state: catalog } = useAddons()
+
+const loading = computed(() => report.value.status === 'pending')
+const totals = computed(() => report.value.data?.totals)
+
+// Systems by the role of the company that owns them. Zero buckets are dropped
+// rather than shown as "0 in distributors": a fleet with no distributors at
+// all should not have to read that fact on every visit.
+const systemBadges = computed(() =>
+  (
+    [
+      ['distributor_systems', 'addons.n_in_distributors'],
+      ['reseller_systems', 'addons.n_in_resellers'],
+      ['customer_systems', 'addons.n_in_customers'],
+      ['owner_systems', 'addons.n_in_owner'],
+    ] as const
+  )
+    .map(([field, label]) => ({ label, count: totals.value?.[field] ?? 0 }))
+    .filter((badge) => badge.count > 0),
+)
+
+// The counter is the 30-day window, so the badges spell the windows out —
+// they are cumulative, and "perpetual" is the tail that never expires at all.
+const expiryBadges = computed(() =>
+  (
+    [
+      ['expiring_in_30d', 'addons.n_in_30d'],
+      ['expiring_in_60d', 'addons.n_in_60d'],
+      ['expiring_in_90d', 'addons.n_in_90d'],
+      ['perpetual', 'addons.n_perpetual'],
+    ] as const
+  )
+    .map(([field, label]) => ({ label, count: totals.value?.[field] ?? 0 }))
+    .filter((badge) => badge.count > 0),
+)
+
+// catalog id -> display name, for the tier table: /report/tiers returns ids
+const addonDisplayNames = computed(() =>
+  Object.fromEntries([
+    ...(catalog.value.data ?? []).map((addon) => [addon.id, addon.display_name]),
+    // the report's own names win: they cover ids the catalog no longer has
+    ...(report.value.data?.by_entitlement ?? []).map((row) => [row.entitlement, row.display_name]),
+  ]),
+)
 </script>
 
 <template>
-  <NeEmptyState
-    :title="$t('addons.report_not_available')"
-    :description="$t('addons.report_not_available_description')"
-    :icon="faChartLine"
-    class="bg-white dark:bg-gray-950"
-  />
+  <div>
+    <NeInlineNotification
+      v-if="report.status === 'error'"
+      kind="error"
+      :title="$t('addons.cannot_retrieve_report')"
+      :description="report.error?.message"
+      class="mb-6"
+    />
+    <!-- without the catalog the report still stands: only the rows for add-ons
+         nobody has bought are missing -->
+    <NeInlineNotification
+      v-if="catalog.status === 'error'"
+      kind="warning"
+      :title="$t('addons.cannot_retrieve_catalog')"
+      :description="catalog.error?.message"
+      class="mb-6"
+    />
+    <div
+      v-if="report.status !== 'error'"
+      class="grid grid-cols-1 gap-6 sm:grid-cols-2 2xl:grid-cols-4"
+    >
+      <CounterCard
+        :title="$t('addons.total_addons')"
+        :counter="totals?.total ?? 0"
+        :icon="faPuzzlePiece"
+        :loading="loading"
+      />
+      <CounterCard
+        :title="$t('addons.systems_with_addons')"
+        :counter="totals?.systems ?? 0"
+        :icon="faServer"
+        :loading="loading"
+      >
+        <div class="flex flex-wrap justify-center gap-2">
+          <NeBadgeV2 v-for="badge in systemBadges" :key="badge.label" kind="gray">
+            {{ $t(badge.label, { n: badge.count }) }}
+          </NeBadgeV2>
+        </div>
+      </CounterCard>
+      <CounterCard
+        :title="$t('addons.expiring_soon')"
+        :counter="totals?.expiring_in_30d ?? 0"
+        :icon="faCalendar"
+        :loading="loading"
+      >
+        <div class="flex flex-wrap justify-center gap-2">
+          <NeBadgeV2 v-for="badge in expiryBadges" :key="badge.label" kind="gray">
+            {{ $t(badge.label, { n: badge.count }) }}
+          </NeBadgeV2>
+        </div>
+      </CounterCard>
+      <CounterCard
+        :title="$t('addons.total_renewals')"
+        :counter="totals?.total_renewals ?? 0"
+        :icon="faArrowsRotate"
+        :loading="loading"
+      />
+      <AddonActivationsCard
+        :trend="report.data?.trend ?? []"
+        :loading="loading"
+        class="sm:col-span-2 2xl:col-span-3"
+      />
+      <AddonRenewalsCard
+        :renewals="report.data?.renewals ?? { never: 0, once: 0, twice: 0, three_plus: 0 }"
+        :total="totals?.total ?? 0"
+        :loading="loading"
+        class="sm:col-span-2 2xl:col-span-1"
+      />
+      <AddonsByAddonCard
+        :by-addon="report.data?.by_entitlement ?? []"
+        :catalog="catalog.data ?? []"
+        :loading="loading"
+        class="sm:col-span-2"
+      />
+      <AddonsByOrganizationCard class="sm:col-span-2" />
+      <AddonsByTierCard :display-names="addonDisplayNames" class="sm:col-span-2" />
+    </div>
+  </div>
 </template>
diff --git a/frontend/src/components/addons/report/AddonActivationsCard.vue b/frontend/src/components/addons/report/AddonActivationsCard.vue
new file mode 100644
index 000000000..c777f9bd3
--- /dev/null
+++ b/frontend/src/components/addons/report/AddonActivationsCard.vue
@@ -0,0 +1,80 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  Grants created per month over the last year. A column chart this plain is a
+  dozen divs whose heights are a share of the busiest month, so it needs no
+  charting library — and it inherits the app's colours and dark mode for free.
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { fillTrendMonths, type AddonReportTrendRow } from '@/lib/addons/addonsReport'
+import ReportCard from './ReportCard.vue'
+
+const { trend, loading } = defineProps<{
+  trend: AddonReportTrendRow[]
+  loading: boolean
+}>()
+
+const { locale } = useI18n()
+
+// A month with a single activation still deserves a visible bar, so the scale
+// starts here rather than at zero; the busiest month stops short of the top to
+// leave its count somewhere to sit.
+const MIN_BAR_PERCENTAGE = 4
+const MAX_BAR_PERCENTAGE = 88
+
+const months = computed(() => {
+  const rows = fillTrendMonths(trend, new Date())
+  const busiest = Math.max(...rows.map((row) => row.activations), 0)
+
+  return rows.map((row) => {
+    const [year, month] = row.month.split('-').map(Number)
+    const date = new Date(year, month - 1, 1)
+
+    return {
+      ...row,
+      label: date.toLocaleDateString(locale.value, { month: 'short' }),
+      // the axis shows the month alone, so the tooltip carries the year
+      title: date.toLocaleDateString(locale.value, { month: 'long', year: 'numeric' }),
+      height: busiest
+        ? `${MIN_BAR_PERCENTAGE + (row.activations / busiest) * (MAX_BAR_PERCENTAGE - MIN_BAR_PERCENTAGE)}%`
+        : '0%',
+    }
+  })
+})
+
+const hasActivations = computed(() => months.value.some((month) => month.activations > 0))
+</script>
+
+<template>
+  <ReportCard :title="$t('addons.activations_last_12_months')" :loading="loading">
+    <div class="flex h-64 items-stretch gap-1 sm:gap-2">
+      <div
+        v-for="month in months"
+        :key="month.month"
+        class="flex flex-1 flex-col items-center gap-2"
+        :title="`${month.title}: ${month.activations}`"
+      >
+        <!-- the count rides directly on top of its own bar rather than on a
+             shared line, so a short bar is not read against a distant number -->
+        <div class="flex w-full flex-1 flex-col items-center justify-end gap-1">
+          <span class="text-secondary-neutral text-sm">{{ month.activations || '' }}</span>
+          <div
+            v-if="month.activations"
+            class="w-full max-w-16 rounded-t-md bg-indigo-600 dark:bg-indigo-400"
+            :style="{ height: month.height }"
+          />
+        </div>
+        <span class="text-secondary-neutral text-sm capitalize">{{ month.label }}</span>
+      </div>
+    </div>
+    <!-- a fleet can hold plenty of add-ons and still have activated none this
+         year: a bare grid of month labels would read as a bug -->
+    <p v-if="!hasActivations" class="text-tertiary-neutral mt-4 text-center text-sm">
+      {{ $t('addons.no_activations') }}
+    </p>
+  </ReportCard>
+</template>
diff --git a/frontend/src/components/addons/report/AddonRenewalsCard.vue b/frontend/src/components/addons/report/AddonRenewalsCard.vue
new file mode 100644
index 000000000..fc83d39b5
--- /dev/null
+++ b/frontend/src/components/addons/report/AddonRenewalsCard.vue
@@ -0,0 +1,56 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  How often the fleet's grants have been renewed. Four buckets over the same
+  denominator — every grant in view — so the bars are comparable down the card.
+-->
+
+<script setup lang="ts">
+import { NeProgressBar } from '@nethesis/vue-components'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { AddonReportRenewals } from '@/lib/addons/addonsReport'
+import ReportCard from './ReportCard.vue'
+
+const { renewals, total, loading } = defineProps<{
+  renewals: AddonReportRenewals
+  // every grant in view, renewed or not: the denominator of all four rows
+  total: number
+  loading: boolean
+}>()
+
+const { t } = useI18n()
+
+const rows = computed(() =>
+  (
+    [
+      ['never', t('addons.never_renewed')],
+      ['once', t('addons.renewed_once')],
+      ['twice', t('addons.renewed_twice')],
+      ['three_plus', t('addons.renewed_three_plus')],
+    ] as const
+  ).map(([bucket, label]) => ({
+    bucket,
+    label,
+    count: renewals[bucket],
+    progress: total ? (renewals[bucket] / total) * 100 : 0,
+  })),
+)
+</script>
+
+<template>
+  <ReportCard :title="$t('addons.renewal_distribution')" :loading="loading">
+    <div class="flex flex-col gap-5">
+      <div v-for="row in rows" :key="row.bucket" class="flex flex-col gap-2">
+        <div class="flex items-baseline justify-between gap-4">
+          <span class="font-medium text-gray-900 dark:text-gray-100">{{ row.label }}</span>
+          <span class="font-medium text-gray-900 dark:text-gray-100">
+            {{ row.count }}/{{ total }}
+          </span>
+        </div>
+        <NeProgressBar :progress="row.progress" size="md" color="indigo" />
+      </div>
+    </div>
+  </ReportCard>
+</template>
diff --git a/frontend/src/components/addons/report/AddonsByAddonCard.vue b/frontend/src/components/addons/report/AddonsByAddonCard.vue
new file mode 100644
index 000000000..483c52c6f
--- /dev/null
+++ b/frontend/src/components/addons/report/AddonsByAddonCard.vue
@@ -0,0 +1,102 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  One bar per add-on type, split by the state its grants are in. The report
+  endpoint only knows about add-ons somebody has, so the catalog is merged in
+  to give the ones nobody has bought a row of their own — on this card that
+  absence is the finding.
+
+  Segment colours come from ADDON_STATUS_STYLE, the same table the status icons
+  read, so green means active here and everywhere else.
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getStatusSegments, type AddonReportByType } from '@/lib/addons/addonsReport'
+import { ADDON_STATUS_STYLE } from '@/lib/addons/systemAddons'
+import type { Addon } from '@/lib/addons/addons'
+import ReportCard from './ReportCard.vue'
+
+const { byAddon, catalog, loading } = defineProps<{
+  byAddon: AddonReportByType[]
+  // the whole catalog, so add-ons with no grants at all still get a row;
+  // empty when it could not be loaded, which only costs those rows
+  catalog: Addon[]
+  loading: boolean
+}>()
+
+const rows = computed(() => {
+  const granted = new Set(byAddon.map((row) => row.entitlement))
+  // the endpoint already orders these by total, busiest first
+  const ungranted: AddonReportByType[] = catalog
+    .filter((addon) => !granted.has(addon.id))
+    .map((addon) => ({
+      entitlement: addon.id,
+      display_name: addon.display_name,
+      active: 0,
+      expired: 0,
+      revoked: 0,
+      pending: 0,
+      suspended: 0,
+      total: 0,
+    }))
+    .sort((a, b) => a.display_name.localeCompare(b.display_name))
+
+  return [...byAddon, ...ungranted].map((row) => ({
+    ...row,
+    segments: getStatusSegments(row),
+  }))
+})
+</script>
+
+<template>
+  <ReportCard :title="$t('addons.by_addon')" :loading="loading">
+    <div class="flex flex-col gap-5">
+      <div v-for="row in rows" :key="row.entitlement" class="flex flex-col gap-2">
+        <div class="flex items-baseline justify-between gap-4">
+          <span class="font-medium text-gray-900 dark:text-gray-100">{{ row.display_name }}</span>
+          <span
+            :class="[
+              'shrink-0 font-medium',
+              row.total ? 'text-gray-900 dark:text-gray-100' : 'text-tertiary-neutral',
+            ]"
+          >
+            {{ $t('addons.n_total', { n: row.total }) }}
+          </span>
+        </div>
+        <!-- one track, one flex segment per state present, widths summing to
+             100%: the empty track shows through only when nothing is granted -->
+        <div
+          class="flex h-2.5 w-full overflow-hidden rounded-full bg-gray-300 dark:bg-gray-600"
+          role="img"
+          :aria-label="row.display_name"
+        >
+          <div
+            v-for="segment in row.segments"
+            :key="segment.status"
+            :class="ADDON_STATUS_STYLE[segment.status].bar"
+            :style="{ width: `${segment.share}%` }"
+            :title="`${segment.count} ${$t(`addons.status_${segment.status}`)}`"
+          />
+        </div>
+        <div v-if="row.segments.length" class="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <span
+            v-for="segment in row.segments"
+            :key="segment.status"
+            class="text-tertiary-neutral flex items-center gap-2 text-sm font-medium"
+          >
+            <span
+              :class="['size-3 shrink-0 rounded-full', ADDON_STATUS_STYLE[segment.status].bar]"
+              aria-hidden="true"
+            />
+            {{ segment.count }} {{ $t(`addons.status_${segment.status}`) }}
+          </span>
+        </div>
+        <span v-else class="text-tertiary-neutral text-sm font-medium">
+          {{ $t('addons.no_systems_with_addon') }}
+        </span>
+      </div>
+    </div>
+  </ReportCard>
+</template>
diff --git a/frontend/src/components/addons/report/AddonsByOrganizationCard.vue b/frontend/src/components/addons/report/AddonsByOrganizationCard.vue
new file mode 100644
index 000000000..9c36681cc
--- /dev/null
+++ b/frontend/src/components/addons/report/AddonsByOrganizationCard.vue
@@ -0,0 +1,117 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  Which companies hold the add-ons. Companies run to the hundreds on the real
+  fleet, so unlike the rest of the report this slice pages and searches on the
+  server: the search box and the paginator both drive the request.
+
+  The design calls this "by organization"; the UI has said "company" since long
+  before it, and only the code keeps the API's word.
+-->
+
+<script setup lang="ts">
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  NeEmptyState,
+  NePaginator,
+  NeTable,
+  NeTableBody,
+  NeTableCell,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableRow,
+  NeTextInput,
+} from '@nethesis/vue-components'
+import { computed } from 'vue'
+import { ADDONS_REPORT_ORGANIZATIONS_TABLE_ID } from '@/lib/addons/addonsReport'
+import { getOrganizationIcon } from '@/lib/organizations/organizations'
+import { PAGE_SIZE_OPTIONS, savePageSizeToStorage } from '@/lib/tablePageSize'
+import { useAddonReportOrganizations } from '@/queries/addons/addonsReport'
+import ReportCard from './ReportCard.vue'
+
+const { state: organizations, pageNum, pageSize, textFilter } = useAddonReportOrganizations()
+
+const rows = computed(() => organizations.value.data?.organizations ?? [])
+const total = computed(() => organizations.value.data?.total ?? 0)
+const loading = computed(() => organizations.value.status === 'pending')
+</script>
+
+<template>
+  <ReportCard :title="$t('addons.by_company')">
+    <div class="flex flex-col gap-4">
+      <NeTextInput
+        v-model="textFilter"
+        is-search
+        :placeholder="$t('addons.filter_companies')"
+        class="max-w-48 sm:max-w-xs"
+        @blur="textFilter = textFilter.trim()"
+      />
+      <!-- searching the whole fleet can legitimately match nothing -->
+      <NeEmptyState
+        v-if="!loading && !rows.length"
+        :title="$t('organizations.no_organizations')"
+        :description="$t('common.try_changing_search_filters')"
+        :icon="faMagnifyingGlass"
+        class="bg-white dark:bg-gray-950"
+      />
+      <NeTable
+        v-else
+        :aria-label="$t('addons.by_company')"
+        card-breakpoint="xl"
+        :loading="loading"
+        :skeleton-columns="4"
+        :skeleton-rows="5"
+      >
+        <NeTableHead>
+          <NeTableHeadCell>{{ $t('organizations.organization') }}</NeTableHeadCell>
+          <NeTableHeadCell>{{ $t('systems.title') }}</NeTableHeadCell>
+          <NeTableHeadCell>{{ $t('addons.status_active') }}</NeTableHeadCell>
+          <NeTableHeadCell>{{ $t('addons.total_addons') }}</NeTableHeadCell>
+        </NeTableHead>
+        <NeTableBody>
+          <NeTableRow v-for="row in rows" :key="row.organization_id">
+            <NeTableCell :data-label="$t('organizations.organization')">
+              <div class="flex items-center gap-2">
+                <FontAwesomeIcon
+                  :icon="getOrganizationIcon(row.org_type)"
+                  class="text-tertiary-neutral size-4 shrink-0"
+                  aria-hidden="true"
+                />
+                <span>{{ row.organization_name }}</span>
+              </div>
+            </NeTableCell>
+            <NeTableCell :data-label="$t('systems.title')">{{ row.systems }}</NeTableCell>
+            <NeTableCell :data-label="$t('addons.status_active')">{{ row.active }}</NeTableCell>
+            <NeTableCell :data-label="$t('addons.total_addons')">{{ row.total }}</NeTableCell>
+          </NeTableRow>
+        </NeTableBody>
+        <template #paginator>
+          <NePaginator
+            :current-page="pageNum"
+            :total-rows="total"
+            :page-size="pageSize"
+            :page-sizes="PAGE_SIZE_OPTIONS"
+            :nav-pagination-label="$t('ne_table.pagination')"
+            :next-label="$t('ne_table.go_to_next_page')"
+            :previous-label="$t('ne_table.go_to_previous_page')"
+            :range-of-total-label="$t('ne_table.of')"
+            :page-size-label="$t('ne_table.show')"
+            @select-page="
+              (page: number) => {
+                pageNum = page
+              }
+            "
+            @select-page-size="
+              (size: number) => {
+                pageSize = size
+                savePageSizeToStorage(ADDONS_REPORT_ORGANIZATIONS_TABLE_ID, size)
+              }
+            "
+          />
+        </template>
+      </NeTable>
+    </div>
+  </ReportCard>
+</template>
diff --git a/frontend/src/components/addons/report/AddonsByTierCard.vue b/frontend/src/components/addons/report/AddonsByTierCard.vue
new file mode 100644
index 000000000..e54b56f6b
--- /dev/null
+++ b/frontend/src/components/addons/report/AddonsByTierCard.vue
@@ -0,0 +1,110 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  How the grants split across the shop tiers of each add-on — the device or
+  mailbox bands the product is sold in. One add-on contributes as many rows as
+  it has tiers, so this slice pages and searches on the server like the
+  organizations one.
+-->
+
+<script setup lang="ts">
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
+import {
+  NeEmptyState,
+  NePaginator,
+  NeTable,
+  NeTableBody,
+  NeTableCell,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableRow,
+  NeTextInput,
+} from '@nethesis/vue-components'
+import { computed } from 'vue'
+import { ADDONS_REPORT_TIERS_TABLE_ID } from '@/lib/addons/addonsReport'
+import { PAGE_SIZE_OPTIONS, savePageSizeToStorage } from '@/lib/tablePageSize'
+import { useAddonReportTiers } from '@/queries/addons/addonsReport'
+import ReportCard from './ReportCard.vue'
+
+const { displayNames } = defineProps<{
+  // catalog id -> display name: the endpoint returns tiers by add-on id
+  displayNames: Record<string, string>
+}>()
+
+const { state: tiers, pageNum, pageSize, textFilter } = useAddonReportTiers()
+
+const rows = computed(() => tiers.value.data?.tiers ?? [])
+const total = computed(() => tiers.value.data?.total ?? 0)
+const loading = computed(() => tiers.value.status === 'pending')
+</script>
+
+<template>
+  <ReportCard :title="$t('addons.by_tier')">
+    <div class="flex flex-col gap-4">
+      <NeTextInput
+        v-model="textFilter"
+        is-search
+        :placeholder="$t('addons.filter_tier')"
+        class="max-w-48 sm:max-w-xs"
+        @blur="textFilter = textFilter.trim()"
+      />
+      <!-- an add-on sold as a single product has no tiers at all, so this card
+           is empty on a fleet that never bought a tiered one -->
+      <NeEmptyState
+        v-if="!loading && !rows.length"
+        :title="$t('addons.no_tiers')"
+        :description="$t('addons.no_tiers_description')"
+        :icon="faMagnifyingGlass"
+        class="bg-white dark:bg-gray-950"
+      />
+      <NeTable
+        v-else
+        :aria-label="$t('addons.by_tier')"
+        card-breakpoint="xl"
+        :loading="loading"
+        :skeleton-columns="3"
+        :skeleton-rows="5"
+      >
+        <NeTableHead>
+          <NeTableHeadCell>{{ $t('addons.addon') }}</NeTableHeadCell>
+          <NeTableHeadCell>{{ $t('addons.tier') }}</NeTableHeadCell>
+          <NeTableHeadCell>{{ $t('addons.count') }}</NeTableHeadCell>
+        </NeTableHead>
+        <NeTableBody>
+          <NeTableRow v-for="row in rows" :key="`${row.entitlement} ${row.label}`">
+            <NeTableCell :data-label="$t('addons.addon')">
+              {{ displayNames[row.entitlement] ?? row.entitlement }}
+            </NeTableCell>
+            <NeTableCell :data-label="$t('addons.tier')">{{ row.label }}</NeTableCell>
+            <NeTableCell :data-label="$t('addons.count')">{{ row.count }}</NeTableCell>
+          </NeTableRow>
+        </NeTableBody>
+        <template #paginator>
+          <NePaginator
+            :current-page="pageNum"
+            :total-rows="total"
+            :page-size="pageSize"
+            :page-sizes="PAGE_SIZE_OPTIONS"
+            :nav-pagination-label="$t('ne_table.pagination')"
+            :next-label="$t('ne_table.go_to_next_page')"
+            :previous-label="$t('ne_table.go_to_previous_page')"
+            :range-of-total-label="$t('ne_table.of')"
+            :page-size-label="$t('ne_table.show')"
+            @select-page="
+              (page: number) => {
+                pageNum = page
+              }
+            "
+            @select-page-size="
+              (size: number) => {
+                pageSize = size
+                savePageSizeToStorage(ADDONS_REPORT_TIERS_TABLE_ID, size)
+              }
+            "
+          />
+        </template>
+      </NeTable>
+    </div>
+  </ReportCard>
+</template>
diff --git a/frontend/src/components/addons/report/ReportCard.vue b/frontend/src/components/addons/report/ReportCard.vue
new file mode 100644
index 000000000..2314aae39
--- /dev/null
+++ b/frontend/src/components/addons/report/ReportCard.vue
@@ -0,0 +1,32 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  A panel of the add-on report. NeCard's own title renders dark and prominent;
+  the report's headings are the muted, uppercase kind CounterCard uses, so its
+  wide panels and the four counters above them read as one board rather than
+  two designs.
+-->
+
+<script setup lang="ts">
+import { NeCard, NeHeading, NeSkeleton } from '@nethesis/vue-components'
+
+const { title, loading = false } = defineProps<{
+  title: string
+  loading?: boolean
+}>()
+</script>
+
+<template>
+  <NeCard>
+    <template #title>
+      <div class="text-tertiary-neutral dark:text-tertiary-neutral">
+        <NeHeading tag="h6" class="text-inherit">{{ title.toUpperCase() }}</NeHeading>
+      </div>
+    </template>
+    <NeSkeleton v-if="loading" :lines="8" class="mt-4 w-full" />
+    <div v-else class="mt-4">
+      <slot />
+    </div>
+  </NeCard>
+</template>
diff --git a/frontend/src/components/systems/addons/AddonStatusIcon.vue b/frontend/src/components/systems/addons/AddonStatusIcon.vue
index 173b7877f..5cfe4c203 100644
--- a/frontend/src/components/systems/addons/AddonStatusIcon.vue
+++ b/frontend/src/components/systems/addons/AddonStatusIcon.vue
@@ -2,26 +2,18 @@
   Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 
-  Where an add-on stands in one place. Shaped after SystemStatusIcon: a v-if
-  chain rather than a lookup map, so the icon, the colour and the label of a
-  state all stay on one line.
+  Where an add-on stands in one place. The icon and its colour come from
+  ADDON_STATUS_STYLE, the one table the report's stacked bars read as well, so
+  a state cannot be called or coloured one way in the summary and another in
+  the table it opens onto.
 
-  Both the card and the detail table render this, so a place cannot be called
-  one thing in the summary and another in the table it opens onto. Pass `count`
-  on the card to name the state and count the applications in it at once.
+  Pass `count` on a card to name the state and count the applications in it at
+  once.
 -->
 
 <script setup lang="ts">
-import {
-  faBan,
-  faCircleCheck,
-  faCircleMinus,
-  faCirclePause,
-  faClock,
-  faHourglassEnd,
-} from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import type { AddonRowStatus } from '@/lib/addons/systemAddons'
+import { ADDON_STATUS_STYLE, type AddonRowStatus } from '@/lib/addons/systemAddons'
 
 const { status, count } = defineProps<{
   status: AddonRowStatus
@@ -34,41 +26,8 @@ const { status, count } = defineProps<{
 <template>
   <span class="flex items-center gap-2">
     <FontAwesomeIcon
-      v-if="status === 'active'"
-      :icon="faCircleCheck"
-      class="text-icon-enabled size-4 shrink-0"
-      aria-hidden="true"
-    />
-    <FontAwesomeIcon
-      v-else-if="status === 'pending'"
-      :icon="faClock"
-      class="size-4 shrink-0 text-amber-700 dark:text-amber-500"
-      aria-hidden="true"
-    />
-    <FontAwesomeIcon
-      v-else-if="status === 'suspended'"
-      :icon="faCirclePause"
-      class="size-4 shrink-0 text-gray-700 dark:text-gray-400"
-      aria-hidden="true"
-    />
-    <FontAwesomeIcon
-      v-else-if="status === 'revoked'"
-      :icon="faBan"
-      class="size-4 shrink-0 text-rose-700 dark:text-rose-500"
-      aria-hidden="true"
-    />
-    <!-- expired is amber, not rose: buying again fixes it, unlike a revocation -->
-    <FontAwesomeIcon
-      v-else-if="status === 'expired'"
-      :icon="faHourglassEnd"
-      class="size-4 shrink-0 text-amber-700 dark:text-amber-500"
-      aria-hidden="true"
-    />
-    <!-- never granted here: nothing has gone wrong, so nothing is coloured -->
-    <FontAwesomeIcon
-      v-else
-      :icon="faCircleMinus"
-      class="text-icon-disabled size-4 shrink-0"
+      :icon="ADDON_STATUS_STYLE[status].icon"
+      :class="['size-4 shrink-0', ADDON_STATUS_STYLE[status].text]"
       aria-hidden="true"
     />
     <span v-if="count === undefined">{{ $t(`addons.status_${status}`) }}</span>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 2a66d3109..0038afb3a 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -848,9 +848,40 @@
     "page_description": "List of add-ons that can be granted to systems and sold on NethShop. Each add-on belongs to a product and, for NethServer, to a specific application.",
     "report_tab": "Report",
     "catalog_tab": "Catalog",
-    "report_not_available": "Report not available yet",
-    "report_not_available_description": "Add-on statistics will appear here in a future release.",
     "cannot_retrieve_addons": "Cannot retrieve add-ons",
+    "cannot_retrieve_report": "Cannot retrieve the add-on report",
+    "cannot_retrieve_catalog": "Cannot retrieve the add-on catalog",
+    "total_addons": "Total add-ons",
+    "systems_with_addons": "Systems with add-ons",
+    "expiring_soon": "Expiring soon",
+    "total_renewals": "Total renewals",
+    "n_in_distributors": "{n} in distributors",
+    "n_in_resellers": "{n} in resellers",
+    "n_in_customers": "{n} in customers",
+    "n_in_owner": "{n} in the owner company",
+    "n_in_30d": "{n} · 30d",
+    "n_in_60d": "{n} · 60d",
+    "n_in_90d": "{n} · 90d",
+    "n_perpetual": "{n} · perpetual",
+    "activations_last_12_months": "Activations (last 12 months)",
+    "no_activations": "No add-ons activated in the last 12 months",
+    "renewal_distribution": "Renewal distribution",
+    "never_renewed": "Never renewed",
+    "renewed_once": "Renewed once",
+    "renewed_twice": "Renewed twice",
+    "renewed_three_plus": "Renewed 3+ times",
+    "by_addon": "By add-on",
+    "n_total": "{n} total",
+    "no_systems_with_addon": "No systems have this add-on yet",
+    "by_company": "By company",
+    "filter_companies": "Filter companies",
+    "by_tier": "By tier",
+    "filter_tier": "Filter tier",
+    "no_tiers": "No tiers",
+    "no_tiers_description": "Add-ons sold in size tiers will appear here once one is purchased.",
+    "addon": "Add-on",
+    "tier": "Tier",
+    "count": "Count",
     "no_addons": "No add-ons yet",
     "no_addons_description": "Create the first add-on to make it available for systems and applications.",
     "no_addons_found": "No add-ons found",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index f97f542be..fbaaa413c 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -775,9 +775,40 @@
     "page_description": "Elenco degli add-on che possono essere assegnati ai sistemi e venduti su NethShop. Ogni add-on appartiene a un prodotto e, per NethServer, a una specifica applicazione.",
     "report_tab": "Report",
     "catalog_tab": "Catalogo",
-    "report_not_available": "Report non ancora disponibile",
-    "report_not_available_description": "Le statistiche sugli add-on appariranno qui in una prossima versione.",
     "cannot_retrieve_addons": "Impossibile recuperare gli add-on",
+    "cannot_retrieve_report": "Impossibile recuperare il report degli add-on",
+    "cannot_retrieve_catalog": "Impossibile recuperare il catalogo degli add-on",
+    "total_addons": "Add-on totali",
+    "systems_with_addons": "Sistemi con add-on",
+    "expiring_soon": "In scadenza",
+    "total_renewals": "Rinnovi totali",
+    "n_in_distributors": "{n} nei distributori",
+    "n_in_resellers": "{n} nei rivenditori",
+    "n_in_customers": "{n} nei clienti",
+    "n_in_owner": "{n} nell'azienda proprietaria",
+    "n_in_30d": "{n} · 30gg",
+    "n_in_60d": "{n} · 60gg",
+    "n_in_90d": "{n} · 90gg",
+    "n_perpetual": "{n} · perpetui",
+    "activations_last_12_months": "Attivazioni (ultimi 12 mesi)",
+    "no_activations": "Nessun add-on attivato negli ultimi 12 mesi",
+    "renewal_distribution": "Distribuzione dei rinnovi",
+    "never_renewed": "Mai rinnovati",
+    "renewed_once": "Rinnovati una volta",
+    "renewed_twice": "Rinnovati due volte",
+    "renewed_three_plus": "Rinnovati 3+ volte",
+    "by_addon": "Per add-on",
+    "n_total": "{n} totali",
+    "no_systems_with_addon": "Nessun sistema ha ancora questo add-on",
+    "by_company": "Per azienda",
+    "filter_companies": "Filtra aziende",
+    "by_tier": "Per fascia",
+    "filter_tier": "Filtra fascia",
+    "no_tiers": "Nessuna fascia",
+    "no_tiers_description": "Gli add-on venduti a fasce di dimensione compariranno qui dopo il primo acquisto.",
+    "addon": "Add-on",
+    "tier": "Fascia",
+    "count": "Quantità",
     "no_addons": "Nessun add-on",
     "no_addons_description": "Crea il primo add-on per renderlo disponibile per sistemi e applicazioni.",
     "no_addons_found": "Nessun add-on trovato",
diff --git a/frontend/src/lib/addons/addonsReport.ts b/frontend/src/lib/addons/addonsReport.ts
new file mode 100644
index 000000000..1dedae1d3
--- /dev/null
+++ b/frontend/src/lib/addons/addonsReport.ts
@@ -0,0 +1,194 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import axios from 'axios'
+import { API_URL } from '../config'
+import { useLoginStore } from '@/stores/login'
+import type { AddonStatus } from './systemAddons'
+
+export const ADDONS_REPORT_KEY = 'addonsReport'
+export const ADDONS_REPORT_ORGANIZATIONS_KEY = 'addonsReportOrganizations'
+export const ADDONS_REPORT_TIERS_KEY = 'addonsReportTiers'
+export const ADDONS_REPORT_ORGANIZATIONS_TABLE_ID = 'addonsReportOrganizationsTable'
+export const ADDONS_REPORT_TIERS_TABLE_ID = 'addonsReportTiersTable'
+
+// The wire paths are still named "entitlements": that is the backend contract.
+// Everything on this side is an add-on.
+const REPORT_PATH = 'entitlements/report'
+const REPORT_ORGANIZATIONS_PATH = 'entitlements/report/organizations'
+const REPORT_TIERS_PATH = 'entitlements/report/tiers'
+
+// Every aggregate below is scoped server-side to the caller's hierarchy: the
+// owner organization and Super Admins see the whole fleet, everyone else only
+// the systems at or below their own organization. Deleted systems are excluded
+// throughout.
+export interface AddonReportTotals {
+  total: number
+  active: number
+  expired: number
+  revoked: number
+  pending: number
+  suspended: number
+  // active grants with no expiry at all (typically legacy imports)
+  perpetual: number
+  // active grants expiring inside the window — cumulative, so 30d ⊆ 60d ⊆ 90d
+  expiring_in_30d: number
+  expiring_in_60d: number
+  expiring_in_90d: number
+  systems: number
+  organizations: number
+  // the four add up to `systems`, split by the role of the owning organization
+  distributor_systems: number
+  reseller_systems: number
+  customer_systems: number
+  owner_systems: number
+  total_renewals: number
+}
+
+export interface AddonReportByType {
+  entitlement: string
+  display_name: string
+  active: number
+  expired: number
+  revoked: number
+  pending: number
+  suspended: number
+  total: number
+}
+
+export interface AddonReportRenewals {
+  never: number
+  once: number
+  twice: number
+  three_plus: number
+}
+
+export interface AddonReportTrendRow {
+  // 'YYYY-MM'
+  month: string
+  activations: number
+}
+
+export interface AddonReport {
+  totals: AddonReportTotals
+  by_entitlement: AddonReportByType[]
+  renewals: AddonReportRenewals
+  trend: AddonReportTrendRow[]
+}
+
+export interface AddonReportByOrganization {
+  organization_id: string
+  organization_name: string
+  org_type: string
+  systems: number
+  active: number
+  total: number
+}
+
+export interface AddonReportByTier {
+  entitlement: string
+  // the shop tier of the purchased product line, e.g. "16-30 device"
+  label: string
+  count: number
+}
+
+interface Envelope<T> {
+  code: number
+  message: string
+  data: T
+}
+
+interface Paginated<T> {
+  total: number
+  page: number
+  page_size: number
+  // plus the rows, under a key that differs per endpoint
+  [rows: string]: T[] | number
+}
+
+const authHeaders = () => {
+  const loginStore = useLoginStore()
+  return { headers: { Authorization: `Bearer ${loginStore.jwtToken}` } }
+}
+
+export const getAddonReport = () =>
+  axios
+    .get<Envelope<AddonReport>>(`${API_URL}/${REPORT_PATH}`, authHeaders())
+    .then((res) => res.data.data)
+
+const paginationParams = (page: number, pageSize: number, search: string) =>
+  `page=${page}&page_size=${pageSize}&search=${encodeURIComponent(search)}`
+
+// Organizations can run to the hundreds on the real fleet, so this slice of
+// the report pages and searches server-side rather than arriving whole.
+export const getAddonReportOrganizations = (page: number, pageSize: number, search: string) =>
+  axios
+    .get<
+      Envelope<Paginated<AddonReportByOrganization>>
+    >(`${API_URL}/${REPORT_ORGANIZATIONS_PATH}?${paginationParams(page, pageSize, search)}`, authHeaders())
+    .then((res) => ({
+      organizations: (res.data.data.organizations ?? []) as AddonReportByOrganization[],
+      total: res.data.data.total as number,
+    }))
+
+export const getAddonReportTiers = (page: number, pageSize: number, search: string) =>
+  axios
+    .get<
+      Envelope<Paginated<AddonReportByTier>>
+    >(`${API_URL}/${REPORT_TIERS_PATH}?${paginationParams(page, pageSize, search)}`, authHeaders())
+    .then((res) => ({
+      tiers: (res.data.data.tiers ?? []) as AddonReportByTier[],
+      total: res.data.data.total as number,
+    }))
+
+// ----- derived shapes -----
+
+export const TREND_MONTHS = 12
+
+// The backend groups activations by month and so returns nothing at all for a
+// month in which nobody activated anything. A chart that simply plotted what
+// arrived would silently close those gaps and misdate every bar, so the twelve
+// months are laid out here and the counts dropped into them.
+export const fillTrendMonths = (
+  trend: AddonReportTrendRow[],
+  today: Date,
+): AddonReportTrendRow[] => {
+  const activations = new Map(trend.map((row) => [row.month, row.activations]))
+  const months: AddonReportTrendRow[] = []
+
+  for (let offset = TREND_MONTHS - 1; offset >= 0; offset--) {
+    const date = new Date(today.getFullYear(), today.getMonth() - offset, 1)
+    const month = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
+
+    months.push({ month, activations: activations.get(month) ?? 0 })
+  }
+
+  return months
+}
+
+// The five states a grant can be in, in the order the stacked bars lay them
+// out: what the customer has, then what is on its way, then the three ways of
+// not having it.
+export const ADDON_REPORT_STATUS_ORDER: AddonStatus[] = [
+  'active',
+  'pending',
+  'suspended',
+  'expired',
+  'revoked',
+]
+
+export interface AddonReportSegment {
+  status: AddonStatus
+  count: number
+  // percentage of the row's total, for the bar width
+  share: number
+}
+
+// Only the states actually present get a segment and a legend entry: a bar
+// carrying five zero-width slivers reads as noise.
+export const getStatusSegments = (row: AddonReportByType): AddonReportSegment[] =>
+  ADDON_REPORT_STATUS_ORDER.filter((status) => row[status] > 0).map((status) => ({
+    status,
+    count: row[status],
+    share: row.total ? (row[status] / row.total) * 100 : 0,
+  }))
diff --git a/frontend/src/lib/addons/systemAddons.ts b/frontend/src/lib/addons/systemAddons.ts
index e20cb4fc6..e0bbaa587 100644
--- a/frontend/src/lib/addons/systemAddons.ts
+++ b/frontend/src/lib/addons/systemAddons.ts
@@ -1,8 +1,17 @@
 //  Copyright (C) 2026 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
+import {
+  faBan,
+  faCircleCheck,
+  faCircleMinus,
+  faCirclePause,
+  faClock,
+  faHourglassEnd,
+} from '@fortawesome/free-solid-svg-icons'
 import axios from 'axios'
 import { API_URL, SHOP_BASE_URL } from '../config'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { useLoginStore } from '@/stores/login'
 import { getDisplayName, type Application } from '../applications/applications'
 import type { Addon } from './addons'
@@ -154,6 +163,44 @@ export type AddonRowStatus = (typeof ADDON_ROW_STATUSES)[number]
 export const getRowStatus = (row: SystemAddonRow): AddonRowStatus =>
   row.grant?.status ?? 'not_purchased'
 
+// One look per status too, shared by the status icon and by the report's
+// stacked bars, so a state cannot be amber in one place and blue in another.
+// `expired` is amber rather than rose because buying again fixes it, unlike a
+// revocation; `suspended` borrows the grey of SystemStatusIcon, since what is
+// suspended is the system, not the grant.
+export const ADDON_STATUS_STYLE: Record<
+  AddonRowStatus,
+  { icon: IconDefinition; text: string; bar: string }
+> = {
+  active: { icon: faCircleCheck, text: 'text-icon-enabled', bar: 'bg-green-700 dark:bg-green-500' },
+  pending: {
+    icon: faClock,
+    text: 'text-blue-700 dark:text-blue-500',
+    bar: 'bg-blue-700 dark:bg-blue-500',
+  },
+  suspended: {
+    icon: faCirclePause,
+    text: 'text-gray-700 dark:text-gray-400',
+    bar: 'bg-gray-700 dark:bg-gray-400',
+  },
+  revoked: {
+    icon: faBan,
+    text: 'text-rose-700 dark:text-rose-500',
+    bar: 'bg-rose-700 dark:bg-rose-500',
+  },
+  expired: {
+    icon: faHourglassEnd,
+    text: 'text-amber-700 dark:text-amber-500',
+    bar: 'bg-amber-700 dark:bg-amber-500',
+  },
+  // never granted here: nothing has gone wrong, so nothing is coloured
+  not_purchased: {
+    icon: faCircleMinus,
+    text: 'text-icon-disabled',
+    bar: 'bg-gray-300 dark:bg-gray-600',
+  },
+}
+
 interface ComposeRowsArgs {
   availableAddons: Addon[]
   grants: AddonGrant[]
diff --git a/frontend/src/queries/addons/addonsReport.ts b/frontend/src/queries/addons/addonsReport.ts
new file mode 100644
index 000000000..284093363
--- /dev/null
+++ b/frontend/src/queries/addons/addonsReport.ts
@@ -0,0 +1,141 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { defineQuery, useQuery } from '@pinia/colada'
+import { useDebounceFn } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import {
+  ADDONS_REPORT_KEY,
+  ADDONS_REPORT_ORGANIZATIONS_KEY,
+  ADDONS_REPORT_ORGANIZATIONS_TABLE_ID,
+  ADDONS_REPORT_TIERS_KEY,
+  ADDONS_REPORT_TIERS_TABLE_ID,
+  getAddonReport,
+  getAddonReportOrganizations,
+  getAddonReportTiers,
+} from '@/lib/addons/addonsReport'
+import { MIN_SEARCH_LENGTH } from '@/lib/common'
+import { DEFAULT_PAGE_SIZE, loadPageSizeFromStorage } from '@/lib/tablePageSize'
+import { useLoginStore } from '@/stores/login'
+
+// The aggregates arrive whole: totals, the per-add-on breakdown, the renewal
+// distribution and the activation trend are one response, with no parameters
+// to give it.
+export const useAddonReport = defineQuery(() => {
+  const loginStore = useLoginStore()
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [ADDONS_REPORT_KEY],
+    enabled: () => !!loginStore.jwtToken,
+    query: () => getAddonReport(),
+  })
+
+  return { ...rest, state, asyncStatus }
+})
+
+// The per-organization and per-tier slices page and search on the server, so
+// each keeps its own paging state and rebuilds its key from it. Written twice
+// rather than shared: the two differ in table id and in what the search box
+// matches, and a factory would hide that behind an argument.
+export const useAddonReportOrganizations = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const pageNum = ref(1)
+  const pageSize = ref(DEFAULT_PAGE_SIZE)
+  const textFilter = ref('')
+  const debouncedTextFilter = ref('')
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [
+      ADDONS_REPORT_ORGANIZATIONS_KEY,
+      { pageNum: pageNum.value, pageSize: pageSize.value, textFilter: debouncedTextFilter.value },
+    ],
+    enabled: () => !!loginStore.jwtToken,
+    query: () =>
+      getAddonReportOrganizations(pageNum.value, pageSize.value, debouncedTextFilter.value),
+  })
+
+  // load table page size from storage
+  watch(
+    () => loginStore.userInfo?.email,
+    (email) => {
+      if (email) {
+        pageSize.value = loadPageSizeFromStorage(ADDONS_REPORT_ORGANIZATIONS_TABLE_ID)
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    () => textFilter.value,
+    useDebounceFn(() => {
+      // debounce and ignore if text filter is too short
+      if (textFilter.value.length === 0 || textFilter.value.length >= MIN_SEARCH_LENGTH) {
+        debouncedTextFilter.value = textFilter.value
+
+        // reset to first page when filter changes
+        pageNum.value = 1
+      }
+    }, 500),
+  )
+
+  // reset to first page when page size changes
+  watch(
+    () => pageSize.value,
+    () => {
+      pageNum.value = 1
+    },
+  )
+
+  return { ...rest, state, asyncStatus, pageNum, pageSize, textFilter }
+})
+
+export const useAddonReportTiers = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const pageNum = ref(1)
+  const pageSize = ref(DEFAULT_PAGE_SIZE)
+  const textFilter = ref('')
+  const debouncedTextFilter = ref('')
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [
+      ADDONS_REPORT_TIERS_KEY,
+      { pageNum: pageNum.value, pageSize: pageSize.value, textFilter: debouncedTextFilter.value },
+    ],
+    enabled: () => !!loginStore.jwtToken,
+    query: () => getAddonReportTiers(pageNum.value, pageSize.value, debouncedTextFilter.value),
+  })
+
+  // load table page size from storage
+  watch(
+    () => loginStore.userInfo?.email,
+    (email) => {
+      if (email) {
+        pageSize.value = loadPageSizeFromStorage(ADDONS_REPORT_TIERS_TABLE_ID)
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    () => textFilter.value,
+    useDebounceFn(() => {
+      // debounce and ignore if text filter is too short
+      if (textFilter.value.length === 0 || textFilter.value.length >= MIN_SEARCH_LENGTH) {
+        debouncedTextFilter.value = textFilter.value
+
+        // reset to first page when filter changes
+        pageNum.value = 1
+      }
+    }, 500),
+  )
+
+  // reset to first page when page size changes
+  watch(
+    () => pageSize.value,
+    () => {
+      pageNum.value = 1
+    },
+  )
+
+  return { ...rest, state, asyncStatus, pageNum, pageSize, textFilter }
+})
diff --git a/frontend/src/views/AddonsView.vue b/frontend/src/views/AddonsView.vue
index c95fb7ebd..4cf39c279 100644
--- a/frontend/src/views/AddonsView.vue
+++ b/frontend/src/views/AddonsView.vue
@@ -18,9 +18,7 @@ const tabsConfig = computed(() => [
   { name: 'catalog', label: t('addons.catalog_tab') },
 ])
 
-// The report tab is still empty, so land on the catalog unless a ?tab= says
-// otherwise.
-const { tabs, selectedTab } = useTabs(tabsConfig, 'catalog')
+const { tabs, selectedTab } = useTabs(tabsConfig, 'report')
 </script>
 
 <template>

From 16f74358a38bd9ce111bde7f4ea849170a7fbbf8 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Tue, 25 Aug 2026 15:25:12 +0200
Subject: [PATCH 04/16] fix(ui): addons improvements

---
 .../components/addons/AddonsReportPanel.vue   | 28 +-------
 .../addons/CreateOrEditAddonDrawer.vue        | 27 ++++++-
 .../addons/report/AddonsByAddonCard.vue       | 38 +++-------
 .../addons/report/AddonsByTierCard.vue        |  7 +-
 frontend/src/i18n/en/translation.json         |  3 +-
 frontend/src/i18n/it/translation.json         |  3 +-
 frontend/src/lib/addons/addons.test.ts        | 70 +++++++++++++++++++
 frontend/src/lib/addons/addons.ts             | 34 +++++++--
 frontend/src/lib/addons/addonsReport.ts       |  3 +
 frontend/src/lib/addons/systemAddons.ts       | 17 ++---
 10 files changed, 147 insertions(+), 83 deletions(-)
 create mode 100644 frontend/src/lib/addons/addons.test.ts

diff --git a/frontend/src/components/addons/AddonsReportPanel.vue b/frontend/src/components/addons/AddonsReportPanel.vue
index c6e2617a4..a32884e9b 100644
--- a/frontend/src/components/addons/AddonsReportPanel.vue
+++ b/frontend/src/components/addons/AddonsReportPanel.vue
@@ -8,7 +8,8 @@
   companies — so nothing here needs a permission check of its own.
 
   The totals, the trend, the renewal split and the per-add-on breakdown arrive
-  in one response; the two tables page and search on their own.
+  in one response — including the add-ons nobody has bought yet, so nothing here
+  needs the catalog; the two tables page and search on their own.
 -->
 
 <script setup lang="ts">
@@ -22,7 +23,6 @@ import { NeBadgeV2, NeInlineNotification } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import CounterCard from '@/components/common/CounterCard.vue'
 import { useAddonReport } from '@/queries/addons/addonsReport'
-import { useAddons } from '@/queries/addons/addons'
 import AddonActivationsCard from './report/AddonActivationsCard.vue'
 import AddonRenewalsCard from './report/AddonRenewalsCard.vue'
 import AddonsByAddonCard from './report/AddonsByAddonCard.vue'
@@ -30,9 +30,6 @@ import AddonsByOrganizationCard from './report/AddonsByOrganizationCard.vue'
 import AddonsByTierCard from './report/AddonsByTierCard.vue'
 
 const { state: report } = useAddonReport()
-// only the "by add-on" card needs this, to give add-ons nobody has bought a
-// row; the catalog query is shared with the Catalog tab
-const { state: catalog } = useAddons()
 
 const loading = computed(() => report.value.status === 'pending')
 const totals = computed(() => report.value.data?.totals)
@@ -67,15 +64,6 @@ const expiryBadges = computed(() =>
     .map(([field, label]) => ({ label, count: totals.value?.[field] ?? 0 }))
     .filter((badge) => badge.count > 0),
 )
-
-// catalog id -> display name, for the tier table: /report/tiers returns ids
-const addonDisplayNames = computed(() =>
-  Object.fromEntries([
-    ...(catalog.value.data ?? []).map((addon) => [addon.id, addon.display_name]),
-    // the report's own names win: they cover ids the catalog no longer has
-    ...(report.value.data?.by_entitlement ?? []).map((row) => [row.entitlement, row.display_name]),
-  ]),
-)
 </script>
 
 <template>
@@ -87,15 +75,6 @@ const addonDisplayNames = computed(() =>
       :description="report.error?.message"
       class="mb-6"
     />
-    <!-- without the catalog the report still stands: only the rows for add-ons
-         nobody has bought are missing -->
-    <NeInlineNotification
-      v-if="catalog.status === 'error'"
-      kind="warning"
-      :title="$t('addons.cannot_retrieve_catalog')"
-      :description="catalog.error?.message"
-      class="mb-6"
-    />
     <div
       v-if="report.status !== 'error'"
       class="grid grid-cols-1 gap-6 sm:grid-cols-2 2xl:grid-cols-4"
@@ -149,12 +128,11 @@ const addonDisplayNames = computed(() =>
       />
       <AddonsByAddonCard
         :by-addon="report.data?.by_entitlement ?? []"
-        :catalog="catalog.data ?? []"
         :loading="loading"
         class="sm:col-span-2"
       />
       <AddonsByOrganizationCard class="sm:col-span-2" />
-      <AddonsByTierCard :display-names="addonDisplayNames" class="sm:col-span-2" />
+      <AddonsByTierCard class="sm:col-span-2" />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/addons/CreateOrEditAddonDrawer.vue b/frontend/src/components/addons/CreateOrEditAddonDrawer.vue
index c8391736d..5a1284248 100644
--- a/frontend/src/components/addons/CreateOrEditAddonDrawer.vue
+++ b/frontend/src/components/addons/CreateOrEditAddonDrawer.vue
@@ -17,7 +17,7 @@ import {
 import { useMutation, useQueryCache } from '@pinia/colada'
 import type { AxiosError } from 'axios'
 import * as v from 'valibot'
-import { computed, ref, useTemplateRef, type ShallowRef } from 'vue'
+import { computed, ref, useTemplateRef, watch, type ShallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
   ADDON_APPLICATION_IDS,
@@ -30,6 +30,7 @@ import {
   getApplicationDisplayName,
   postAddon,
   putAddon,
+  slugifyAddonName,
   type Addon,
   type AddonForm,
   type AddonProduct,
@@ -115,6 +116,7 @@ const product = ref<AddonProduct | ''>('')
 const application = ref('')
 const applicationRef = useTemplateRef<HTMLInputElement>('applicationRef')
 const technicalName = ref('')
+const technicalNameEdited = ref(false)
 const technicalNameRef = useTemplateRef<HTMLInputElement>('technicalNameRef')
 const displayName = ref('')
 const displayNameRef = useTemplateRef<HTMLInputElement>('displayNameRef')
@@ -153,6 +155,24 @@ const composedId = computed(() =>
   }),
 )
 
+// One is usually the other in kebab-case, so the technical name follows the
+// display name while the user has not written one. It stays a real field: the id
+// it composes is immutable, and the feeds want terse ids (nsec-ha, not
+// nsec-high-availability), so a deliberate value has to win.
+watch(displayName, () => {
+  if (!isEditing.value && !technicalNameEdited.value) {
+    technicalName.value = slugifyAddonName(displayName.value)
+  }
+})
+
+// A value the display name would not have produced can only have been typed:
+// that is what stops the suggestion above, and clearing the field resumes it.
+// NeTextInput emits update:modelValue only, so this comparison — rather than an
+// @input listener — is what tells a manual edit from a suggested one.
+watch(technicalName, (value) => {
+  technicalNameEdited.value = !!value && value !== slugifyAddonName(displayName.value)
+})
+
 // A validation-code response with no field errors (e.g. the 409 raised when the
 // id already exists) would otherwise be swallowed: the axios interceptor stays
 // quiet for those and there is nothing to attach to a field.
@@ -176,12 +196,14 @@ function onShow() {
     technicalName.value = getAddonTechnicalName(currentAddon)
     displayName.value = currentAddon.display_name
     description.value = currentAddon.description
+    technicalNameEdited.value = false
     focusElement(displayNameRef)
   } else {
     // creating add-on, reset form to defaults
     product.value = ''
     application.value = ''
     technicalName.value = ''
+    technicalNameEdited.value = false
     displayName.value = ''
     description.value = ''
   }
@@ -263,6 +285,9 @@ async function saveAddon() {
       kind: form.product === 'ns8' ? 'module' : 'service',
       system_type: form.product as AddonProduct,
       scoped: form.product === 'ns8',
+      // the application the module belongs to, so the backend does not have to
+      // guess it from the id prefix
+      applies_to: form.application,
     })
   }
 }
diff --git a/frontend/src/components/addons/report/AddonsByAddonCard.vue b/frontend/src/components/addons/report/AddonsByAddonCard.vue
index 483c52c6f..212c6907b 100644
--- a/frontend/src/components/addons/report/AddonsByAddonCard.vue
+++ b/frontend/src/components/addons/report/AddonsByAddonCard.vue
@@ -2,10 +2,9 @@
   Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 
-  One bar per add-on type, split by the state its grants are in. The report
-  endpoint only knows about add-ons somebody has, so the catalog is merged in
-  to give the ones nobody has bought a row of their own — on this card that
-  absence is the finding.
+  One bar per add-on type, split by the state its grants are in. Add-ons nobody
+  has bought arrive from the endpoint too, with every count at zero — on this
+  card that absence is the finding — already limited to what the caller may buy.
 
   Segment colours come from ADDON_STATUS_STYLE, the same table the status icons
   read, so green means active here and everywhere else.
@@ -15,39 +14,20 @@
 import { computed } from 'vue'
 import { getStatusSegments, type AddonReportByType } from '@/lib/addons/addonsReport'
 import { ADDON_STATUS_STYLE } from '@/lib/addons/systemAddons'
-import type { Addon } from '@/lib/addons/addons'
 import ReportCard from './ReportCard.vue'
 
-const { byAddon, catalog, loading } = defineProps<{
+const { byAddon, loading } = defineProps<{
   byAddon: AddonReportByType[]
-  // the whole catalog, so add-ons with no grants at all still get a row;
-  // empty when it could not be loaded, which only costs those rows
-  catalog: Addon[]
   loading: boolean
 }>()
 
-const rows = computed(() => {
-  const granted = new Set(byAddon.map((row) => row.entitlement))
-  // the endpoint already orders these by total, busiest first
-  const ungranted: AddonReportByType[] = catalog
-    .filter((addon) => !granted.has(addon.id))
-    .map((addon) => ({
-      entitlement: addon.id,
-      display_name: addon.display_name,
-      active: 0,
-      expired: 0,
-      revoked: 0,
-      pending: 0,
-      suspended: 0,
-      total: 0,
-    }))
-    .sort((a, b) => a.display_name.localeCompare(b.display_name))
-
-  return [...byAddon, ...ungranted].map((row) => ({
+// the endpoint already orders these by total, busiest first
+const rows = computed(() =>
+  byAddon.map((row) => ({
     ...row,
     segments: getStatusSegments(row),
-  }))
-})
+  })),
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/addons/report/AddonsByTierCard.vue b/frontend/src/components/addons/report/AddonsByTierCard.vue
index e54b56f6b..da70137e8 100644
--- a/frontend/src/components/addons/report/AddonsByTierCard.vue
+++ b/frontend/src/components/addons/report/AddonsByTierCard.vue
@@ -27,11 +27,6 @@ import { PAGE_SIZE_OPTIONS, savePageSizeToStorage } from '@/lib/tablePageSize'
 import { useAddonReportTiers } from '@/queries/addons/addonsReport'
 import ReportCard from './ReportCard.vue'
 
-const { displayNames } = defineProps<{
-  // catalog id -> display name: the endpoint returns tiers by add-on id
-  displayNames: Record<string, string>
-}>()
-
 const { state: tiers, pageNum, pageSize, textFilter } = useAddonReportTiers()
 
 const rows = computed(() => tiers.value.data?.tiers ?? [])
@@ -74,7 +69,7 @@ const loading = computed(() => tiers.value.status === 'pending')
         <NeTableBody>
           <NeTableRow v-for="row in rows" :key="`${row.entitlement} ${row.label}`">
             <NeTableCell :data-label="$t('addons.addon')">
-              {{ displayNames[row.entitlement] ?? row.entitlement }}
+              {{ row.display_name || row.entitlement }}
             </NeTableCell>
             <NeTableCell :data-label="$t('addons.tier')">{{ row.label }}</NeTableCell>
             <NeTableCell :data-label="$t('addons.count')">{{ row.count }}</NeTableCell>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 0038afb3a..9e01acdbc 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -850,7 +850,6 @@
     "catalog_tab": "Catalog",
     "cannot_retrieve_addons": "Cannot retrieve add-ons",
     "cannot_retrieve_report": "Cannot retrieve the add-on report",
-    "cannot_retrieve_catalog": "Cannot retrieve the add-on catalog",
     "total_addons": "Total add-ons",
     "systems_with_addons": "Systems with add-ons",
     "expiring_soon": "Expiring soon",
@@ -896,7 +895,7 @@
     "display_name_helper": "The name shown to users in My Nethesis and NethShop.",
     "technical_name": "Technical name",
     "technical_name_helper": "Used to generate the add-on ID. It cannot be changed later.",
-    "technical_name_helper_with_id": "Used to generate the add-on ID: {id}. It cannot be changed later.",
+    "technical_name_helper_with_id": "Generated add-on ID: {id}. It cannot be changed later.",
     "create_addon": "Create add-on",
     "edit_addon": "Edit add-on",
     "save_addon": "Save add-on",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index fbaaa413c..706761486 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -777,7 +777,6 @@
     "catalog_tab": "Catalogo",
     "cannot_retrieve_addons": "Impossibile recuperare gli add-on",
     "cannot_retrieve_report": "Impossibile recuperare il report degli add-on",
-    "cannot_retrieve_catalog": "Impossibile recuperare il catalogo degli add-on",
     "total_addons": "Add-on totali",
     "systems_with_addons": "Sistemi con add-on",
     "expiring_soon": "In scadenza",
@@ -823,7 +822,7 @@
     "display_name_helper": "Il nome mostrato agli utenti in My Nethesis e NethShop.",
     "technical_name": "Nome tecnico",
     "technical_name_helper": "Utilizzato per generare l'ID dell'add-on. Non può essere modificato in seguito.",
-    "technical_name_helper_with_id": "Utilizzato per generare l'ID dell'add-on: {id}. Non può essere modificato in seguito.",
+    "technical_name_helper_with_id": "ID dell'add-on generato: {id}. Non può essere modificato in seguito.",
     "create_addon": "Crea add-on",
     "edit_addon": "Modifica add-on",
     "save_addon": "Salva add-on",
diff --git a/frontend/src/lib/addons/addons.test.ts b/frontend/src/lib/addons/addons.test.ts
new file mode 100644
index 000000000..b9152e6fb
--- /dev/null
+++ b/frontend/src/lib/addons/addons.test.ts
@@ -0,0 +1,70 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { describe, expect, it } from 'vitest'
+import { ADDON_ID_REGEX, composeAddonId, slugifyAddonName } from './addons'
+
+describe('slugifyAddonName', () => {
+  it('lowercases and hyphenates the words', () => {
+    expect(slugifyAddonName('High Availability')).toBe('high-availability')
+    expect(slugifyAddonName('GeoIP')).toBe('geoip')
+  })
+
+  it('collapses any run of unusable characters into a single hyphen', () => {
+    expect(slugifyAddonName('Antivirus  Posta  &  Email')).toBe('antivirus-posta-email')
+    expect(slugifyAddonName('Threat\tIntel\nFeed')).toBe('threat-intel-feed')
+    expect(slugifyAddonName('Sandbox 2.0')).toBe('sandbox-2-0')
+  })
+
+  it('strips accents rather than dropping the letters', () => {
+    expect(slugifyAddonName('Antivírus Móvel')).toBe('antivirus-movel')
+    expect(slugifyAddonName('Sécurité Réseau')).toBe('securite-reseau')
+  })
+
+  it('leaves no hyphen at either end', () => {
+    expect(slugifyAddonName('  Hotspot Manager  ')).toBe('hotspot-manager')
+    expect(slugifyAddonName('(Beta) Sandbox!')).toBe('beta-sandbox')
+  })
+
+  it('returns an empty string when nothing usable is left', () => {
+    expect(slugifyAddonName('')).toBe('')
+    expect(slugifyAddonName('!!! ???')).toBe('')
+  })
+
+  it('caps the length so the composed id stays within what the backend accepts', () => {
+    const slug = slugifyAddonName('Advanced '.repeat(20) + 'Shield')
+
+    expect(slug.length).toBeLessThanOrEqual(60)
+    // the cap must not leave a dangling hyphen behind
+    expect(slug.endsWith('-')).toBe(false)
+    expect(ADDON_ID_REGEX.test(`nethsecurity-controller-${slug}`)).toBe(true)
+  })
+})
+
+describe('slugifyAddonName composed into an id', () => {
+  const idFor = (product: 'nsec' | 'ns8', application: string, displayName: string) =>
+    composeAddonId({
+      product,
+      application,
+      technical_name: slugifyAddonName(displayName),
+    })
+
+  it('builds a valid NethSecurity service id', () => {
+    const id = idFor('nsec', '', 'High Availability')
+
+    expect(id).toBe('nsec-high-availability')
+    expect(ADDON_ID_REGEX.test(id)).toBe(true)
+  })
+
+  it('builds a valid NethServer module id, hyphenated application included', () => {
+    const id = idFor('ns8', 'nethvoice-proxy', 'Proxy Failover')
+
+    expect(id).toBe('nethvoice-proxy-proxy-failover')
+    expect(ADDON_ID_REGEX.test(id)).toBe(true)
+  })
+
+  it('has no id to compose while the display name carries nothing usable', () => {
+    expect(idFor('nsec', '', '###')).toBe('')
+    expect(idFor('ns8', 'mail', '')).toBe('')
+  })
+})
diff --git a/frontend/src/lib/addons/addons.ts b/frontend/src/lib/addons/addons.ts
index 41d1a5508..b68cff37b 100644
--- a/frontend/src/lib/addons/addons.ts
+++ b/frontend/src/lib/addons/addons.ts
@@ -77,6 +77,8 @@ export const AddonSchema = v.object({
   kind: AddonKindSchema,
   system_type: v.optional(v.string()),
   legacy_alias: v.optional(v.string()),
+  // the application a module add-on belongs to, empty for a system-wide service
+  applies_to: v.optional(v.string()),
   created_at: v.string(),
   updated_at: v.string(),
 })
@@ -91,6 +93,8 @@ export interface CreateAddon {
   kind: AddonKind
   system_type: AddonProduct
   scoped: boolean
+  // the application a module belongs to; ignored by the backend for services
+  applies_to: string
 }
 
 // What PUT /entitlements/catalog/:id accepts: the backend takes the display
@@ -126,6 +130,27 @@ export interface AddonForm {
   description: string
 }
 
+// A display name is usually the technical name in kebab-case, so the drawer
+// suggests one from the other. lib/common's normalize() cannot serve here: it
+// maps spaces to underscores and keeps symbols, both of which ADDON_ID_REGEX
+// rejects — it exists to build i18n keys, not ids.
+const MAX_TECHNICAL_NAME_LENGTH = 60
+
+export const slugifyAddonName = (displayName: string) => {
+  const slug = displayName
+    // split the accents off their letters, then drop them: "Antivírus" -> antivirus
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    // any run of what an id cannot carry collapses into a single hyphen
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+
+  // Keeps the composed id — product or application prefix included — within the
+  // 99 characters the backend accepts, however long the display name is.
+  return slug.slice(0, MAX_TECHNICAL_NAME_LENGTH).replace(/-+$/, '')
+}
+
 // nsec-<service> for NethSecurity, <app>-<module> for NethServer, matching the
 // id convention the backend documents.
 export const composeAddonId = (
@@ -147,15 +172,14 @@ export const composeAddonId = (
   }
 }
 
-// The application is encoded in the id prefix; there is no application field on
-// the add-on. Longest match wins, so nethvoice-proxy-* is not read as nethvoice.
-const applicationIdsByLength = [...ADDON_APPLICATION_IDS].sort((a, b) => b.length - a.length)
-
+// The application a module belongs to is stored on the add-on: the id prefix
+// cannot be trusted for it, since an application name may itself contain a
+// hyphen (nethvoice-proxy).
 export const getAddonApplication = (addon: Addon) => {
   if (addon.kind !== 'module') {
     return ''
   }
-  return applicationIdsByLength.find((appId) => addon.id.startsWith(`${appId}-`)) ?? ''
+  return addon.applies_to ?? ''
 }
 
 // The technical name is the id without the product/application prefix — what
diff --git a/frontend/src/lib/addons/addonsReport.ts b/frontend/src/lib/addons/addonsReport.ts
index 1dedae1d3..b44c973a1 100644
--- a/frontend/src/lib/addons/addonsReport.ts
+++ b/frontend/src/lib/addons/addonsReport.ts
@@ -87,6 +87,9 @@ export interface AddonReportByOrganization {
 
 export interface AddonReportByTier {
   entitlement: string
+  // the catalog name of the add-on, falling back server-side to the id for
+  // types no longer in the catalog — the search matches what this shows
+  display_name: string
   // the shop tier of the purchased product line, e.g. "16-30 device"
   label: string
   count: number
diff --git a/frontend/src/lib/addons/systemAddons.ts b/frontend/src/lib/addons/systemAddons.ts
index e0bbaa587..915b6dd5b 100644
--- a/frontend/src/lib/addons/systemAddons.ts
+++ b/frontend/src/lib/addons/systemAddons.ts
@@ -243,25 +243,16 @@ export const composeSystemAddonRows = ({
   }
 
   // Modules only exist on a NethServer cluster, one row per application
-  // instance: a module belongs to an application when its catalog id is
-  // prefixed with that application's type. Longest prefix wins, so a
-  // "nethvoice-proxy-*" module is not read as belonging to "nethvoice".
+  // instance: the add-on names the application it belongs to in `applies_to`,
+  // which is why the id prefix is never read for it — an application name may
+  // itself contain a hyphen ("nethvoice-proxy").
   if (systemType === 'ns8') {
     const modules = availableAddons.filter((addon) => addon.kind === 'module')
     const instances = [...applications].sort((a, b) => a.module_id.localeCompare(b.module_id))
-    const applicationTypes = [...new Set(instances.map((app) => app.instance_of))].sort(
-      (a, b) => b.length - a.length,
-    )
-    const ownerOf = new Map(
-      modules.map((module) => [
-        module.id,
-        applicationTypes.find((type) => module.id.startsWith(`${type}-`)) ?? '',
-      ]),
-    )
 
     for (const application of instances) {
       for (const addon of modules.filter(
-        (module) => ownerOf.get(module.id) === application.instance_of,
+        (module) => module.applies_to === application.instance_of,
       )) {
         rows.push({
           addon,

From 55a657a8efecf4670424bb9110c9eba9d048f4cd Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Tue, 25 Aug 2026 15:42:18 +0200
Subject: [PATCH 05/16] fix(ui): show addon renew info

---
 .../systems/addons/SystemAddonDetail.vue      | 34 ++++++++++++-------
 frontend/src/i18n/en/translation.json         |  1 +
 frontend/src/i18n/it/translation.json         |  1 +
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/systems/addons/SystemAddonDetail.vue b/frontend/src/components/systems/addons/SystemAddonDetail.vue
index 6c4675152..73c73428b 100644
--- a/frontend/src/components/systems/addons/SystemAddonDetail.vue
+++ b/frontend/src/components/systems/addons/SystemAddonDetail.vue
@@ -392,18 +392,26 @@ function formatValidity(row: SystemAddonRow) {
             <!-- with no grant there is no order to name: the Status column is
                  where "not purchased" is said -->
             <span v-if="!row.grant">-</span>
-            <a
-              v-else-if="getOrderNumber(row.grant)"
-              :href="getOrderUrl(row.grant, isAddonAdmin())"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-primary-700 dark:text-primary-500 hover:underline"
-            >
-              #{{ getOrderNumber(row.grant) }}
-            </a>
-            <span v-else class="text-tertiary-neutral italic">
-              {{ $t('addons.manually_created') }}
-            </span>
+            <div v-else>
+              <a
+                v-if="getOrderNumber(row.grant)"
+                :href="getOrderUrl(row.grant, isAddonAdmin())"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-primary-700 dark:text-primary-500 hover:underline"
+              >
+                #{{ getOrderNumber(row.grant) }}
+              </a>
+              <span v-else class="text-tertiary-neutral italic">
+                {{ $t('addons.manually_created') }}
+              </span>
+              <!-- renewals are the paid orders beyond the first, so the count
+                   belongs to the order that carries it. Zero is the first
+                   period and says nothing worth a line of its own. -->
+              <div v-if="row.grant.renewal_count" class="text-tertiary-neutral mt-1">
+                {{ $t('addons.n_renewals', { count: row.grant.renewal_count }) }}
+              </div>
+            </div>
           </NeTableCell>
           <NeTableCell :data-label="$t('addons.purchased_by')">
             <div v-if="getPurchaserName(row)" class="flex items-center gap-2">
@@ -426,7 +434,7 @@ function formatValidity(row: SystemAddonRow) {
                 :logto-id="row.grant.created_by.user_id ?? ''"
               />
               <div>
-                <div class="text-tertiary-neutral text-xs">{{ $t('addons.created_by') }}</div>
+                <div class="text-tertiary-neutral">{{ $t('addons.created_by') }}</div>
                 <div>{{ row.grant.created_by.user_name }}</div>
               </div>
             </div>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 9e01acdbc..a940a5918 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -862,6 +862,7 @@
     "n_in_60d": "{n} · 60d",
     "n_in_90d": "{n} · 90d",
     "n_perpetual": "{n} · perpetual",
+    "n_renewals": "{count} renewal | {count} renewals",
     "activations_last_12_months": "Activations (last 12 months)",
     "no_activations": "No add-ons activated in the last 12 months",
     "renewal_distribution": "Renewal distribution",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 706761486..dd7f1b609 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -789,6 +789,7 @@
     "n_in_60d": "{n} · 60gg",
     "n_in_90d": "{n} · 90gg",
     "n_perpetual": "{n} · perpetui",
+    "n_renewals": "{count} rinnovo | {count} rinnovi",
     "activations_last_12_months": "Attivazioni (ultimi 12 mesi)",
     "no_activations": "Nessun add-on attivato negli ultimi 12 mesi",
     "renewal_distribution": "Distribuzione dei rinnovi",

From 2d70b681f67b20fd171e5cb9ac79bfe3be74d01a Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Tue, 25 Aug 2026 15:50:37 +0200
Subject: [PATCH 06/16] fix(ui): page size for addons report tables

---
 frontend/src/queries/addons/addonsReport.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/queries/addons/addonsReport.ts b/frontend/src/queries/addons/addonsReport.ts
index 284093363..8a7b2da16 100644
--- a/frontend/src/queries/addons/addonsReport.ts
+++ b/frontend/src/queries/addons/addonsReport.ts
@@ -15,9 +15,14 @@ import {
   getAddonReportTiers,
 } from '@/lib/addons/addonsReport'
 import { MIN_SEARCH_LENGTH } from '@/lib/common'
-import { DEFAULT_PAGE_SIZE, loadPageSizeFromStorage } from '@/lib/tablePageSize'
+import { loadPageSizeFromStorage } from '@/lib/tablePageSize'
 import { useLoginStore } from '@/stores/login'
 
+// Both report tables sit among the cards rather than on a page of their own,
+// so they open on a short first page and let the reader ask for more. A page
+// size the user picks is still remembered per table.
+const PAGE_SIZE = 5
+
 // The aggregates arrive whole: totals, the per-add-on breakdown, the renewal
 // distribution and the activation trend are one response, with no parameters
 // to give it.
@@ -40,7 +45,7 @@ export const useAddonReport = defineQuery(() => {
 export const useAddonReportOrganizations = defineQuery(() => {
   const loginStore = useLoginStore()
   const pageNum = ref(1)
-  const pageSize = ref(DEFAULT_PAGE_SIZE)
+  const pageSize = ref(PAGE_SIZE)
   const textFilter = ref('')
   const debouncedTextFilter = ref('')
 
@@ -59,7 +64,7 @@ export const useAddonReportOrganizations = defineQuery(() => {
     () => loginStore.userInfo?.email,
     (email) => {
       if (email) {
-        pageSize.value = loadPageSizeFromStorage(ADDONS_REPORT_ORGANIZATIONS_TABLE_ID)
+        pageSize.value = loadPageSizeFromStorage(ADDONS_REPORT_ORGANIZATIONS_TABLE_ID, PAGE_SIZE)
       }
     },
     { immediate: true },
@@ -92,7 +97,7 @@ export const useAddonReportOrganizations = defineQuery(() => {
 export const useAddonReportTiers = defineQuery(() => {
   const loginStore = useLoginStore()
   const pageNum = ref(1)
-  const pageSize = ref(DEFAULT_PAGE_SIZE)
+  const pageSize = ref(PAGE_SIZE)
   const textFilter = ref('')
   const debouncedTextFilter = ref('')
 
@@ -110,7 +115,7 @@ export const useAddonReportTiers = defineQuery(() => {
     () => loginStore.userInfo?.email,
     (email) => {
       if (email) {
-        pageSize.value = loadPageSizeFromStorage(ADDONS_REPORT_TIERS_TABLE_ID)
+        pageSize.value = loadPageSizeFromStorage(ADDONS_REPORT_TIERS_TABLE_ID, PAGE_SIZE)
       }
     },
     { immediate: true },

From 64cac12841bb0c5c116e9d021d7f5c8622a8047c Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Tue, 25 Aug 2026 16:29:37 +0200
Subject: [PATCH 07/16] fix(ui): layout for nsec system addons

---
 .../components/systems/SystemAddonsPanel.vue  |  10 +-
 .../systems/addons/SystemAddonCard.vue        | 136 +++++++++++++++--
 .../systems/addons/SystemAddonDetail.vue      | 111 ++------------
 .../systems/addons/SystemAddonsGrid.vue       |  42 +++++-
 .../src/composables/useSystemAddonActions.ts  | 138 ++++++++++++++++++
 frontend/src/i18n/en/translation.json         |   1 +
 frontend/src/i18n/it/translation.json         |   1 +
 frontend/src/lib/addons/systemAddons.ts       |  12 ++
 8 files changed, 339 insertions(+), 112 deletions(-)
 create mode 100644 frontend/src/composables/useSystemAddonActions.ts

diff --git a/frontend/src/components/systems/SystemAddonsPanel.vue b/frontend/src/components/systems/SystemAddonsPanel.vue
index 5e93a08d0..1102fd49e 100644
--- a/frontend/src/components/systems/SystemAddonsPanel.vue
+++ b/frontend/src/components/systems/SystemAddonsPanel.vue
@@ -80,9 +80,14 @@ function closeAddon() {
 
 <template>
   <div>
-    <!-- page description -->
+    <!-- page description: on a firewall the card states the add-on in full, so
+         there is nothing to open and the last sentence would be a dead end -->
     <div class="text-tertiary-neutral mb-8 max-w-3xl">
-      {{ $t('addons.system_addons_description') }}
+      {{
+        system?.type === 'nsec'
+          ? $t('addons.system_addons_description_nsec')
+          : $t('addons.system_addons_description')
+      }}
     </div>
     <!-- get add-ons error notification -->
     <NeInlineNotification
@@ -122,6 +127,7 @@ function closeAddon() {
         :rows="rows"
         :loading="isLoading"
         :refreshing="isRefreshing"
+        :system-type="system?.type ?? ''"
         @open="openAddon"
       />
     </template>
diff --git a/frontend/src/components/systems/addons/SystemAddonCard.vue b/frontend/src/components/systems/addons/SystemAddonCard.vue
index 54a992048..9092b6d7e 100644
--- a/frontend/src/components/systems/addons/SystemAddonCard.vue
+++ b/frontend/src/components/systems/addons/SystemAddonCard.vue
@@ -2,10 +2,15 @@
   Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 
-  One add-on of a system, summarised over the places it applies to: a line per
-  state any of them is in. A NethServer module counts its application
-  instances; a NethSecurity service covers the whole firewall, so it states its
-  state plainly rather than claiming to be "active on 1 application".
+  One add-on of a system, in one of two shapes.
+
+  A NethSecurity service covers the whole firewall, so there is exactly one
+  thing to say about it: the card says it here — status, validity, order,
+  purchaser — and carries the action, with no detail table to open.
+
+  A NethServer module applies to each application instance separately, so the
+  card can only summarise (a line per state any instance is in) and hands off to
+  the detail table, which lists them one by one.
 -->
 
 <script setup lang="ts">
@@ -14,21 +19,45 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { NeButton, NeCard } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import ApplicationLogo from '@/components/applications/ApplicationLogo.vue'
+import DataItem from '@/components/common/DataItem.vue'
 import SystemLogo from '@/components/systems/SystemLogo.vue'
-import { ADDON_ROW_STATUSES, type AddonRowStatus } from '@/lib/addons/systemAddons'
+import UserAvatar from '@/components/users/UserAvatar.vue'
+import { useSystemAddonActions } from '@/composables/useSystemAddonActions'
+import {
+  ADDON_ROW_STATUSES,
+  getOrderNumber,
+  getOrderUrl,
+  getPurchaserName,
+  getRowStatus,
+  type AddonRowStatus,
+  type SystemAddonRow,
+} from '@/lib/addons/systemAddons'
+import { isAddonAdmin } from '@/lib/permissions'
 import type { Addon } from '@/lib/addons/addons'
+import type { AddonAction } from './AddonActionModal.vue'
 import AddonStatusIcon from './AddonStatusIcon.vue'
 
-const { addon, applicationId, counts, scoped } = defineProps<{
+const {
+  addon,
+  applicationId,
+  counts,
+  scoped,
+  row = undefined,
+} = defineProps<{
   addon: Addon
   // the application these rows belong to, '' for a system-wide service
   applicationId: string
   counts: Record<AddonRowStatus, number>
   // false for a NethSecurity service: one place, so no counting
   scoped: boolean
+  // the single row this add-on has on this system, when it has exactly one:
+  // the card then states it in full instead of pointing at the detail table
+  row?: SystemAddonRow
 }>()
 
-const emit = defineEmits<{ details: [] }>()
+const emit = defineEmits<{ details: []; action: [row: SystemAddonRow, action: AddonAction] }>()
+
+const { getAddonActions, formatValidity } = useSystemAddonActions()
 
 const statusLines = computed(() =>
   ADDON_ROW_STATUSES.filter((status) => counts[status] > 0).map((status) => ({
@@ -36,6 +65,14 @@ const statusLines = computed(() =>
     count: counts[status],
   })),
 )
+
+// At most one entry, by construction — see getAddonActions. Rendered as a list
+// all the same, so that a second one would appear beside the first instead of
+// being silently dropped. Buying opens the shop from the item itself; the
+// administrative actions travel up to the grid, which owns the modal.
+const actions = computed(() =>
+  row ? getAddonActions(row, (action) => emit('action', row, action)) : [],
+)
 </script>
 
 <template>
@@ -50,8 +87,79 @@ const statusLines = computed(() =>
         </div>
         <p v-if="addon.description" class="text-tertiary-neutral">{{ addon.description }}</p>
       </div>
+      <!-- everything there is to say about the one place it applies to -->
+      <div v-if="row" class="divide-y divide-gray-200 dark:divide-gray-700">
+        <DataItem>
+          <template #label>{{ $t('addons.status') }}</template>
+          <template #data>
+            <AddonStatusIcon :status="getRowStatus(row)" />
+          </template>
+        </DataItem>
+        <!-- with nothing granted there is no period, order or buyer to name:
+             the status line above already says "not purchased" -->
+        <template v-if="row.grant">
+          <DataItem>
+            <template #label>{{ $t('addons.validity') }}</template>
+            <template #data>{{ formatValidity(row) }}</template>
+          </DataItem>
+          <DataItem>
+            <template #label>{{ $t('addons.order') }}</template>
+            <template #data>
+              <a
+                v-if="getOrderNumber(row.grant)"
+                :href="getOrderUrl(row.grant, isAddonAdmin())"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-primary-700 dark:text-primary-500 hover:underline"
+              >
+                #{{ getOrderNumber(row.grant) }}
+              </a>
+              <span v-else class="text-tertiary-neutral italic">
+                {{ $t('addons.manually_created') }}
+              </span>
+              <!-- renewals are the paid orders beyond the first, so the count
+                   belongs to the order that carries it -->
+              <div v-if="row.grant.renewal_count" class="text-tertiary-neutral text-xs">
+                {{ $t('addons.n_renewals', { count: row.grant.renewal_count }) }}
+              </div>
+            </template>
+          </DataItem>
+          <DataItem>
+            <template #label>{{ $t('addons.purchased_by') }}</template>
+            <template #data>
+              <div v-if="getPurchaserName(row)" class="flex items-center justify-end gap-2">
+                <UserAvatar
+                  size="sm"
+                  :is-owner="false"
+                  :name="getPurchaserName(row)"
+                  :logto-id="row.grant.purchased_by?.logto_id ?? ''"
+                />
+                <span>{{ getPurchaserName(row) }}</span>
+              </div>
+              <span v-else-if="row.grant.purchased_by?.out_of_scope" class="text-tertiary-neutral">
+                {{ $t('addons.purchaser_not_visible') }}
+              </span>
+              <div
+                v-else-if="row.grant.created_by?.user_name"
+                class="flex items-center justify-end gap-2"
+              >
+                <UserAvatar
+                  size="sm"
+                  :is-owner="false"
+                  :name="row.grant.created_by.user_name"
+                  :logto-id="row.grant.created_by.user_id ?? ''"
+                />
+                <div>
+                  <div>{{ row.grant.created_by.user_name }}</div>
+                </div>
+              </div>
+              <span v-else>-</span>
+            </template>
+          </DataItem>
+        </template>
+      </div>
       <!-- one line per state the add-on is in somewhere on this system -->
-      <div class="flex flex-col gap-2">
+      <div v-else class="flex flex-col gap-2">
         <AddonStatusIcon
           v-for="line in statusLines"
           :key="line.status"
@@ -61,8 +169,16 @@ const statusLines = computed(() =>
         />
       </div>
       <!-- pushed to the bottom so cards of differing height line their buttons up -->
-      <div class="mt-auto flex justify-end">
-        <NeButton kind="tertiary" @click="emit('details')">
+      <div class="mt-auto flex justify-end gap-2">
+        <template v-if="row">
+          <NeButton v-for="item in actions" :key="item.id" kind="tertiary" @click="item.action?.()">
+            <template v-if="item.icon" #prefix>
+              <FontAwesomeIcon :icon="item.icon" class="size-4" aria-hidden="true" />
+            </template>
+            {{ item.label }}
+          </NeButton>
+        </template>
+        <NeButton v-else kind="tertiary" @click="emit('details')">
           {{ $t('addons.details') }}
           <template #suffix>
             <FontAwesomeIcon :icon="faArrowRightLong" class="size-4" aria-hidden="true" />
diff --git a/frontend/src/components/systems/addons/SystemAddonDetail.vue b/frontend/src/components/systems/addons/SystemAddonDetail.vue
index 73c73428b..0cb5d3030 100644
--- a/frontend/src/components/systems/addons/SystemAddonDetail.vue
+++ b/frontend/src/components/systems/addons/SystemAddonDetail.vue
@@ -15,8 +15,6 @@
 import {
   faArrowLeft,
   faArrowUpRightFromSquare,
-  faBan,
-  faCircleCheck,
   faMagnifyingGlass,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -35,7 +33,6 @@ import {
   NeTableRow,
   NeTextInput,
   type NeDropdownFilterV2Option,
-  type NeDropdownItem,
 } from '@nethesis/vue-components'
 import { useDebounceFn } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
@@ -47,21 +44,21 @@ import UserAvatar from '@/components/users/UserAvatar.vue'
 import {
   ADDON_ROW_STATUSES,
   SYSTEM_ADDONS_TABLE_ID,
-  getBuyUrl,
   getOrderNumber,
   getOrderUrl,
+  getPurchaserName,
   getRowStatus,
   type SystemAddonRow,
 } from '@/lib/addons/systemAddons'
 import { MIN_SEARCH_LENGTH } from '@/lib/common'
-import { formatDateNoTime } from '@/lib/dateTime'
-import { canBuyAddons, isAddonAdmin } from '@/lib/permissions'
+import { isAddonAdmin } from '@/lib/permissions'
 import {
   DEFAULT_PAGE_SIZE,
   PAGE_SIZE_OPTIONS,
   loadPageSizeFromStorage,
   savePageSizeToStorage,
 } from '@/lib/tablePageSize'
+import { useSystemAddonActions } from '@/composables/useSystemAddonActions'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 import { useLoginStore } from '@/stores/login'
 import AddonActionModal, { type AddonAction } from './AddonActionModal.vue'
@@ -76,9 +73,10 @@ const { rows, loading, refreshing } = defineProps<{
 
 const emit = defineEmits<{ back: [] }>()
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
 const loginStore = useLoginStore()
 const { state: systemDetail } = useSystemDetail()
+const { canBuy, openShop, getKebabMenuItems, formatValidity } = useSystemAddonActions()
 
 const textFilter = ref('')
 const debouncedTextFilter = ref('')
@@ -107,22 +105,6 @@ const firstColumnLabel = computed(() =>
 // does a cluster running a single instance of the application.
 const areFiltersShown = computed(() => rows.length > 1)
 
-// A suspended or deleted system cannot use anything it holds — collect turns
-// its credentials away before it ever looks at the grants — so buying more is
-// pointless while it stays that way.
-const isSystemBlocked = computed(() =>
-  ['suspended', 'deleted'].includes(systemDetail.value.data?.status ?? ''),
-)
-
-const getPurchaserName = (row: SystemAddonRow) => {
-  const purchaser = row.grant?.purchased_by
-
-  if (!purchaser || purchaser.out_of_scope) {
-    return ''
-  }
-  return purchaser.name ?? purchaser.email ?? ''
-}
-
 const purchaserFilterOptions = computed((): NeDropdownFilterV2Option[] => {
   const names = new Set(rows.map(getPurchaserName).filter((name) => !!name))
 
@@ -216,78 +198,10 @@ function showActionModal(row: SystemAddonRow, action: AddonAction) {
   isShownActionModal.value = true
 }
 
-// Nothing is offered on a blocked system, and nothing can be bought that the
-// company is not allowed to have in the first place.
-function canBuy(row: SystemAddonRow) {
-  if (!canBuyAddons() || isSystemBlocked.value) {
-    return false
-  }
-  if (!row.grant) {
-    return true
-  }
-  // a shop-side revocation (cancelled subscription, failed payment) can be
-  // undone by buying again; a deliberate one cannot
-  return (
-    row.grant.status === 'expired' ||
-    (row.grant.status === 'revoked' && row.grant.revoked_source === 'shop')
-  )
-}
-
-function getKebabMenuItems(row: SystemAddonRow): NeDropdownItem[] {
-  const items: NeDropdownItem[] = []
-
-  if (!isAddonAdmin() || isSystemBlocked.value) {
-    return items
-  }
-
-  if (!row.grant) {
-    items.push({
-      id: 'activate',
-      label: t('addons.activate'),
-      icon: faCircleCheck,
-      action: () => showActionModal(row, 'activate'),
-    })
-  } else if (row.grant.status === 'active') {
-    items.push({
-      id: 'revoke',
-      label: t('addons.revoke'),
-      icon: faBan,
-      danger: true,
-      action: () => showActionModal(row, 'revoke'),
-    })
-  } else if (row.grant.status === 'revoked') {
-    // restoring only clears the revocation: on an expired grant it would
-    // change nothing, so it is not offered there
-    items.push({
-      id: 'reactivate',
-      label: t('addons.reactivate'),
-      icon: faCircleCheck,
-      action: () => showActionModal(row, 'reactivate'),
-    })
-  }
-
-  return items
-}
-
-function openShop(row: SystemAddonRow) {
-  window.open(getBuyUrl(systemDetail.value.data?.system_key ?? '', row), '_blank')
-}
-
-// Dates only: a licence period is counted in days, so the time of day is noise.
-function formatValidity(row: SystemAddonRow) {
-  // A grant awaiting payment has no period yet — the backend marks the stub by
-  // setting valid_until to valid_from, which would otherwise read as a licence
-  // that expired the day it started.
-  if (!row.grant || row.grant.status === 'pending') {
-    return '-'
-  }
-  const from = formatDateNoTime(new Date(row.grant.valid_from), locale.value)
-  const until = row.grant.valid_until
-    ? formatDateNoTime(new Date(row.grant.valid_until), locale.value)
-    : t('addons.never_expires')
-
-  return `${from} - ${until}`
-}
+// The kebab is the table's own: the composable hands back the items and this
+// component keeps the modal they open.
+const kebabMenuItems = (row: SystemAddonRow) =>
+  getKebabMenuItems(row, (action) => showActionModal(row, action))
 </script>
 
 <template>
@@ -434,7 +348,6 @@ function formatValidity(row: SystemAddonRow) {
                 :logto-id="row.grant.created_by.user_id ?? ''"
               />
               <div>
-                <div class="text-tertiary-neutral">{{ $t('addons.created_by') }}</div>
                 <div>{{ row.grant.created_by.user_name }}</div>
               </div>
             </div>
@@ -451,7 +364,7 @@ function formatValidity(row: SystemAddonRow) {
               <!-- when buying is the only thing on offer it gets a button of its
                    own rather than hiding inside a one-item kebab -->
               <NeButton
-                v-if="canBuy(row) && !getKebabMenuItems(row).length"
+                v-if="canBuy(row) && !kebabMenuItems(row).length"
                 kind="tertiary"
                 @click="openShop(row)"
               >
@@ -465,9 +378,9 @@ function formatValidity(row: SystemAddonRow) {
                 {{ $t('addons.buy') }}
               </NeButton>
               <NeDropdown
-                v-else-if="getKebabMenuItems(row).length || canBuy(row)"
+                v-else-if="kebabMenuItems(row).length || canBuy(row)"
                 :items="[
-                  ...getKebabMenuItems(row),
+                  ...kebabMenuItems(row),
                   ...(canBuy(row)
                     ? [
                         {
diff --git a/frontend/src/components/systems/addons/SystemAddonsGrid.vue b/frontend/src/components/systems/addons/SystemAddonsGrid.vue
index 2c90fb902..896d46d00 100644
--- a/frontend/src/components/systems/addons/SystemAddonsGrid.vue
+++ b/frontend/src/components/systems/addons/SystemAddonsGrid.vue
@@ -5,6 +5,10 @@
   The add-ons of one system, one card per add-on. Rows are grouped here and
   counted by status for the card to summarise; opening a card hands the add-on
   id up to the panel, which swaps in the detail table.
+
+  On a NethSecurity firewall an add-on has a single, system-wide row, so the
+  card states it in full and carries its action instead — the modal those
+  actions open lives here, once for the whole grid.
 -->
 
 <script setup lang="ts">
@@ -29,15 +33,19 @@ import {
   type SystemAddonRow,
 } from '@/lib/addons/systemAddons'
 import { MIN_SEARCH_LENGTH } from '@/lib/common'
+import AddonActionModal, { type AddonAction } from './AddonActionModal.vue'
 import SystemAddonCard from './SystemAddonCard.vue'
 
 // enough cards to fill the widest row while the three queries land
 const SKELETON_CARDS = 4
 
-const { rows, loading, refreshing } = defineProps<{
+const { rows, loading, refreshing, systemType } = defineProps<{
   rows: SystemAddonRow[]
   loading: boolean
   refreshing: boolean
+  // 'nsec' puts the add-on's own row on the card; anything else keeps the card
+  // a summary that opens the detail table
+  systemType: string
 }>()
 
 const emit = defineEmits<{ open: [addonId: string] }>()
@@ -49,6 +57,10 @@ const debouncedTextFilter = ref('')
 const applicationFilter = ref<NeDropdownFilterV2Option[]>([])
 const statusFilter = ref<NeDropdownFilterV2Option[]>([])
 
+const currentRow = ref<SystemAddonRow | undefined>()
+const currentAction = ref<AddonAction>('activate')
+const isShownActionModal = ref(false)
+
 // One card per add-on, over every place it applies to.
 const cards = computed(() => {
   const groups = new Map<
@@ -58,6 +70,7 @@ const cards = computed(() => {
       applicationId: string
       scoped: boolean
       counts: Record<AddonRowStatus, number>
+      rows: SystemAddonRow[]
     }
   >()
 
@@ -74,10 +87,12 @@ const cards = computed(() => {
           AddonRowStatus,
           number
         >,
+        rows: [],
       }
       groups.set(row.addon.id, group)
     }
     group.counts[getRowStatus(row)] += 1
+    group.rows.push(row)
   }
 
   return [...groups.values()].sort((a, b) =>
@@ -138,6 +153,19 @@ watch(
   }, 500),
 )
 
+// The card shows the row itself only on a firewall, and only when the add-on
+// really has just the one: a legacy scoped grant there would make two, and
+// hiding one of them on a card would be worse than opening the table.
+function inlineRow(card: { rows: SystemAddonRow[] }) {
+  return systemType === 'nsec' && card.rows.length === 1 ? card.rows[0] : undefined
+}
+
+function showActionModal(row: SystemAddonRow, action: AddonAction) {
+  currentRow.value = row
+  currentAction.value = action
+  isShownActionModal.value = true
+}
+
 function clearFilters() {
   textFilter.value = ''
   debouncedTextFilter.value = ''
@@ -158,7 +186,10 @@ function clearFilters() {
           class="max-w-48 sm:max-w-sm"
           @blur="textFilter = textFilter.trim()"
         />
+        <!-- a firewall's add-ons are system-wide: there is no application to
+             filter by, so the dropdown would only ever offer an empty list -->
         <NeDropdownFilterV2
+          v-if="systemType !== 'nsec'"
           v-model="applicationFilter"
           kind="checkbox"
           :label="t('addons.application_type')"
@@ -220,8 +251,17 @@ function clearFilters() {
         :application-id="card.applicationId"
         :counts="card.counts"
         :scoped="card.scoped"
+        :row="inlineRow(card)"
         @details="emit('open', card.addon.id)"
+        @action="showActionModal"
       />
     </div>
+    <!-- activate / revoke / reactivate modal, for the cards that act in place -->
+    <AddonActionModal
+      :visible="isShownActionModal"
+      :action="currentAction"
+      :row="currentRow"
+      @close="isShownActionModal = false"
+    />
   </div>
 </template>
diff --git a/frontend/src/composables/useSystemAddonActions.ts b/frontend/src/composables/useSystemAddonActions.ts
new file mode 100644
index 000000000..27ffc80b8
--- /dev/null
+++ b/frontend/src/composables/useSystemAddonActions.ts
@@ -0,0 +1,138 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { faArrowUpRightFromSquare, faBan, faCircleCheck } from '@fortawesome/free-solid-svg-icons'
+import type { NeDropdownItem } from '@nethesis/vue-components'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { AddonAction } from '@/components/systems/addons/AddonActionModal.vue'
+import { getBuyUrl, type SystemAddonRow } from '@/lib/addons/systemAddons'
+import { formatDateNoTime } from '@/lib/dateTime'
+import { canBuyAddons, isAddonAdmin } from '@/lib/permissions'
+import { useSystemDetail } from '@/queries/systems/systemDetail'
+
+// What a viewer may do with one add-on of one system, and how a grant reads.
+// Shared by the NethSecurity card and the NethServer detail table so the rules
+// cannot drift apart: which revocations can be undone by buying again, and what
+// a suspended system takes off the table, are easy to get subtly wrong twice.
+//
+// The modal stays with whoever renders it — the caller passes onSelect and gets
+// told which action was chosen.
+export const useSystemAddonActions = () => {
+  const { t, locale } = useI18n()
+  const { state: systemDetail } = useSystemDetail()
+
+  // A suspended or deleted system cannot use anything it holds — collect turns
+  // its credentials away before it ever looks at the grants — so buying more is
+  // pointless while it stays that way.
+  const isSystemBlocked = computed(() =>
+    ['suspended', 'deleted'].includes(systemDetail.value.data?.status ?? ''),
+  )
+
+  // Nothing is offered on a blocked system, and nothing can be bought that the
+  // company is not allowed to have in the first place.
+  const canBuy = (row: SystemAddonRow) => {
+    if (!canBuyAddons() || isSystemBlocked.value) {
+      return false
+    }
+    if (!row.grant) {
+      return true
+    }
+    // a shop-side revocation (cancelled subscription, failed payment) can be
+    // undone by buying again; a deliberate one cannot
+    return (
+      row.grant.status === 'expired' ||
+      (row.grant.status === 'revoked' && row.grant.revoked_source === 'shop')
+    )
+  }
+
+  const openShop = (row: SystemAddonRow) => {
+    window.open(getBuyUrl(systemDetail.value.data?.system_key ?? '', row), '_blank')
+  }
+
+  const getKebabMenuItems = (
+    row: SystemAddonRow,
+    onSelect: (action: AddonAction) => void,
+  ): NeDropdownItem[] => {
+    const items: NeDropdownItem[] = []
+
+    if (!isAddonAdmin() || isSystemBlocked.value) {
+      return items
+    }
+
+    if (!row.grant) {
+      items.push({
+        id: 'activate',
+        label: t('addons.activate'),
+        icon: faCircleCheck,
+        action: () => onSelect('activate'),
+      })
+    } else if (row.grant.status === 'active') {
+      items.push({
+        id: 'revoke',
+        label: t('addons.revoke'),
+        icon: faBan,
+        danger: true,
+        action: () => onSelect('revoke'),
+      })
+    } else if (row.grant.status === 'revoked') {
+      // restoring only clears the revocation: on an expired grant it would
+      // change nothing, so it is not offered there
+      items.push({
+        id: 'reactivate',
+        label: t('addons.reactivate'),
+        icon: faCircleCheck,
+        action: () => onSelect('reactivate'),
+      })
+    }
+
+    return items
+  }
+
+  // Everything on offer for one row, in one list. It holds AT MOST ONE entry:
+  // buying needs manage:addons WITHOUT owner-level authority (canBuyAddons),
+  // the administrative three need exactly that authority (isAddonAdmin), and
+  // the chain above pushes one of them at a time. Callers may render it as a
+  // single button on that basis.
+  const getAddonActions = (
+    row: SystemAddonRow,
+    onSelect: (action: AddonAction) => void,
+  ): NeDropdownItem[] => [
+    ...getKebabMenuItems(row, onSelect),
+    ...(canBuy(row)
+      ? [
+          {
+            id: 'buy',
+            label: t('addons.buy'),
+            icon: faArrowUpRightFromSquare,
+            action: () => openShop(row),
+          },
+        ]
+      : []),
+  ]
+
+  // Dates only: a licence period is counted in days, so the time of day is noise.
+  const formatValidity = (row: SystemAddonRow) => {
+    // A grant awaiting payment has no period yet — the backend marks the stub by
+    // setting valid_until to valid_from, which would otherwise read as a licence
+    // that expired the day it started.
+    if (!row.grant || row.grant.status === 'pending') {
+      return '-'
+    }
+    const from = formatDateNoTime(new Date(row.grant.valid_from), locale.value)
+    const until = row.grant.valid_until
+      ? formatDateNoTime(new Date(row.grant.valid_until), locale.value)
+      : t('addons.never_expires')
+
+    return `${from} - ${until}`
+  }
+
+  return {
+    isSystemBlocked,
+    canBuy,
+    openShop,
+    getKebabMenuItems,
+    getAddonActions,
+    formatValidity,
+  }
+}
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index a940a5918..0341de94b 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -914,6 +914,7 @@
     "technical_name_cannot_be_empty": "Technical name cannot be empty",
     "technical_name_is_invalid": "Technical name can only contain lowercase letters, numbers and hyphens",
     "system_addons_description": "Add-ons available for this system. Purchases made on NethShop appear here automatically. Open an add-on to see its status, validity and originating order.",
+    "system_addons_description_nsec": "Add-ons available for this system. Purchases made on NethShop appear here automatically.",
     "cannot_retrieve_system_addons": "Cannot retrieve the add-ons of this system",
     "cannot_retrieve_available_addons": "Cannot retrieve available add-ons",
     "cannot_retrieve_applications": "Cannot retrieve the applications of this system",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index dd7f1b609..65b63b352 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -841,6 +841,7 @@
     "technical_name_cannot_be_empty": "Il nome tecnico non può essere vuoto",
     "technical_name_is_invalid": "Il nome tecnico può contenere solo lettere minuscole, numeri e trattini",
     "system_addons_description": "Add-on disponibili per questo sistema. Gli acquisti effettuati su NethShop compaiono qui automaticamente. Apri un add-on per vederne stato, validità e ordine di origine.",
+    "system_addons_description_nsec": "Add-on disponibili per questo sistema. Gli acquisti effettuati su NethShop compaiono qui automaticamente.",
     "cannot_retrieve_system_addons": "Impossibile recuperare gli add-on di questo sistema",
     "cannot_retrieve_available_addons": "Impossibile recuperare gli add-on disponibili",
     "cannot_retrieve_applications": "Impossibile recuperare le applicazioni di questo sistema",
diff --git a/frontend/src/lib/addons/systemAddons.ts b/frontend/src/lib/addons/systemAddons.ts
index 915b6dd5b..47f2fff43 100644
--- a/frontend/src/lib/addons/systemAddons.ts
+++ b/frontend/src/lib/addons/systemAddons.ts
@@ -163,6 +163,18 @@ export type AddonRowStatus = (typeof ADDON_ROW_STATUSES)[number]
 export const getRowStatus = (row: SystemAddonRow): AddonRowStatus =>
   row.grant?.status ?? 'not_purchased'
 
+// Who bought the grant, as far as this viewer is allowed to know: a purchaser
+// outside their hierarchy arrives redacted, and a manual grant has no buyer at
+// all. Callers fall back to the creator snapshot when this comes back empty.
+export const getPurchaserName = (row: SystemAddonRow) => {
+  const purchaser = row.grant?.purchased_by
+
+  if (!purchaser || purchaser.out_of_scope) {
+    return ''
+  }
+  return purchaser.name ?? purchaser.email ?? ''
+}
+
 // One look per status too, shared by the status icon and by the report's
 // stacked bars, so a state cannot be amber in one place and blue in another.
 // `expired` is amber rather than rose because buying again fixes it, unlike a

From 1bb76519777fb40e390a655d608b8bf50e0f54f2 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 26 Aug 2026 09:52:06 +0200
Subject: [PATCH 08/16] fix(ui): add animation tokens

---
 frontend/src/assets/main.css                  |  11 +-
 .../alerts/EditEmailNotificationsDrawer.vue   |   6 +-
 .../EditTelegramNotificationsDrawer.vue       |   6 +-
 .../alerts/EditWebhookNotificationsDrawer.vue |   6 +-
 frontend/src/components/shell/AppShell.vue    |  12 +-
 frontend/src/components/shell/SideMenu.vue    |   8 +-
 frontend/src/components/shell/TopBar.vue      | 227 +++++++++---------
 .../systems/SystemChangesTimeline.vue         |   2 +-
 8 files changed, 140 insertions(+), 138 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 3235614a1..76eb9be51 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -43,6 +43,13 @@
   --breakpoint-6xl: 192rem;
   --breakpoint-7xl: 224rem;
 
+  /* motion durations, scaled by how far the animated element travels: state
+     feedback and small components are quick, while large panels get more time
+     to enter than to leave */
+  --duration-small: 200ms;
+  --duration-large-enter: 300ms;
+  --duration-large-leave: 200ms;
+
   /* animations */
   --animate-spin-relaxed: spin 1.5s linear infinite;
   --animate-fade-in: fade-in 0.3s ease-in;
@@ -83,7 +90,7 @@
   /* fade transition */
   .fade-enter-active,
   .fade-leave-active {
-    transition: all 0.3s ease;
+    transition: all var(--duration-small) ease;
   }
 
   .fade-enter-from,
@@ -94,7 +101,7 @@
   /* slide-down transition */
   .slide-down-enter-active,
   .slide-down-leave-active {
-    transition: all 0.3s ease;
+    transition: all var(--duration-small) ease;
   }
 
   .slide-down-enter-from,
diff --git a/frontend/src/components/alerts/EditEmailNotificationsDrawer.vue b/frontend/src/components/alerts/EditEmailNotificationsDrawer.vue
index e0ed70893..301c52a65 100644
--- a/frontend/src/components/alerts/EditEmailNotificationsDrawer.vue
+++ b/frontend/src/components/alerts/EditEmailNotificationsDrawer.vue
@@ -264,7 +264,7 @@ function closeDrawer() {
             </div>
             <FontAwesomeIcon
               :icon="faChevronDown"
-              class="ml-3 size-4 shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400"
+              class="ml-3 size-4 shrink-0 text-gray-500 transition-transform duration-(--duration-small) dark:text-gray-400"
               :style="{ transform: expandedIndex === index ? 'rotate(180deg)' : 'rotate(0deg)' }"
             />
           </button>
@@ -371,8 +371,8 @@ function closeDrawer() {
 .accordion-leave-active {
   overflow: hidden;
   transition:
-    max-height 0.25s ease,
-    opacity 0.2s ease;
+    max-height var(--duration-small) ease,
+    opacity var(--duration-small) ease;
 }
 
 .accordion-enter-from,
diff --git a/frontend/src/components/alerts/EditTelegramNotificationsDrawer.vue b/frontend/src/components/alerts/EditTelegramNotificationsDrawer.vue
index 37a600a03..7b6ed7384 100644
--- a/frontend/src/components/alerts/EditTelegramNotificationsDrawer.vue
+++ b/frontend/src/components/alerts/EditTelegramNotificationsDrawer.vue
@@ -272,7 +272,7 @@ function closeDrawer() {
             </div>
             <FontAwesomeIcon
               :icon="faChevronDown"
-              class="ml-3 size-4 shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400"
+              class="ml-3 size-4 shrink-0 text-gray-500 transition-transform duration-(--duration-small) dark:text-gray-400"
               :style="{ transform: expandedIndex === index ? 'rotate(180deg)' : 'rotate(0deg)' }"
             />
           </button>
@@ -380,8 +380,8 @@ function closeDrawer() {
 .accordion-leave-active {
   overflow: hidden;
   transition:
-    max-height 0.25s ease,
-    opacity 0.2s ease;
+    max-height var(--duration-small) ease,
+    opacity var(--duration-small) ease;
 }
 
 .accordion-enter-from,
diff --git a/frontend/src/components/alerts/EditWebhookNotificationsDrawer.vue b/frontend/src/components/alerts/EditWebhookNotificationsDrawer.vue
index 5c7149671..7cdd4ef4f 100644
--- a/frontend/src/components/alerts/EditWebhookNotificationsDrawer.vue
+++ b/frontend/src/components/alerts/EditWebhookNotificationsDrawer.vue
@@ -254,7 +254,7 @@ function closeDrawer() {
             </div>
             <FontAwesomeIcon
               :icon="faChevronDown"
-              class="ml-3 size-4 shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400"
+              class="ml-3 size-4 shrink-0 text-gray-500 transition-transform duration-(--duration-small) dark:text-gray-400"
               :style="{ transform: expandedIndex === index ? 'rotate(180deg)' : 'rotate(0deg)' }"
             />
           </button>
@@ -349,8 +349,8 @@ function closeDrawer() {
 .accordion-leave-active {
   overflow: hidden;
   transition:
-    max-height 0.25s ease,
-    opacity 0.2s ease;
+    max-height var(--duration-small) ease,
+    opacity var(--duration-small) ease;
 }
 
 .accordion-enter-from,
diff --git a/frontend/src/components/shell/AppShell.vue b/frontend/src/components/shell/AppShell.vue
index 4f66dabbf..55e6cd430 100644
--- a/frontend/src/components/shell/AppShell.vue
+++ b/frontend/src/components/shell/AppShell.vue
@@ -38,10 +38,10 @@ const logoFile = computed(() => {
       <Dialog as="div" class="relative z-50 lg:hidden" @close="sidebarOpen = false">
         <TransitionChild
           as="template"
-          enter="transition-opacity ease-linear duration-300"
+          enter="transition-opacity ease-linear duration-(--duration-large-enter)"
           enter-from="opacity-0"
           enter-to="opacity-100"
-          leave="transition-opacity ease-linear duration-300"
+          leave="transition-opacity ease-linear duration-(--duration-large-leave)"
           leave-from="opacity-100"
           leave-to="opacity-0"
         >
@@ -51,20 +51,20 @@ const logoFile = computed(() => {
         <div class="fixed inset-0 flex">
           <TransitionChild
             as="template"
-            enter="transition ease-in-out duration-300 transform"
+            enter="transition ease-in-out transform duration-(--duration-large-enter)"
             enter-from="-translate-x-full"
             enter-to="translate-x-0"
-            leave="transition ease-in-out duration-300 transform"
+            leave="transition ease-in-out transform duration-(--duration-large-leave)"
             leave-from="translate-x-0"
             leave-to="-translate-x-full"
           >
             <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
               <TransitionChild
                 as="template"
-                enter="ease-in-out duration-300"
+                enter="ease-in-out duration-(--duration-large-enter)"
                 enter-from="opacity-0"
                 enter-to="opacity-100"
-                leave="ease-in-out duration-300"
+                leave="ease-in-out duration-(--duration-large-leave)"
                 leave-from="opacity-100"
                 leave-to="opacity-0"
               >
diff --git a/frontend/src/components/shell/SideMenu.vue b/frontend/src/components/shell/SideMenu.vue
index 126717426..fadc9faba 100644
--- a/frontend/src/components/shell/SideMenu.vue
+++ b/frontend/src/components/shell/SideMenu.vue
@@ -228,7 +228,7 @@ function loadMenuItemsExpanded() {
         isCurrentRoute(dashboardItem.to)
           ? 'border-primary-700 dark:border-primary-500 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50'
           : 'text-tertiary-neutral dark:text-tertiary-neutral border-transparent hover:text-gray-900 dark:hover:text-gray-50',
-        'group flex cursor-pointer items-center gap-x-3 rounded-md border-l-4 px-3 py-2 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
+        'group flex cursor-pointer items-center gap-x-3 rounded-md border-l-4 px-3 py-2 text-sm leading-6 font-semibold transition-colors duration-(--duration-small) hover:bg-gray-100 dark:hover:bg-gray-800',
       ]"
     >
       <FontAwesomeIcon
@@ -255,7 +255,7 @@ function loadMenuItemsExpanded() {
               isCurrentRoute(item.to)
                 ? 'border-primary-700 dark:border-primary-500 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50'
                 : 'text-tertiary-neutral dark:text-tertiary-neutral border-transparent hover:text-gray-900 dark:hover:text-gray-50',
-              'group flex cursor-pointer items-center gap-x-3 rounded-md border-l-4 px-3 py-2 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
+              'group flex cursor-pointer items-center gap-x-3 rounded-md border-l-4 px-3 py-2 text-sm leading-6 font-semibold transition-colors duration-(--duration-small) hover:bg-gray-100 dark:hover:bg-gray-800',
             ]"
           >
             <FontAwesomeIcon
@@ -273,7 +273,7 @@ function loadMenuItemsExpanded() {
               isCurrentRoute(item.to)
                 ? 'text-gray-900 dark:text-gray-50'
                 : 'text-tertiary-neutral dark:text-tertiary-neutral hover:text-gray-900 dark:hover:text-gray-50',
-              'group flex cursor-pointer items-center justify-between rounded-md border-l-4 border-transparent px-3 py-2 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
+              'group flex cursor-pointer items-center justify-between rounded-md border-l-4 border-transparent px-3 py-2 text-sm leading-6 font-semibold transition-colors duration-(--duration-small) hover:bg-gray-100 dark:hover:bg-gray-800',
             ]"
             @click="toggleExpand(item)"
           >
@@ -303,7 +303,7 @@ function loadMenuItemsExpanded() {
                       isCurrentRoute(child.to)
                         ? 'border-primary-700 dark:border-primary-500 border-l-4 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50'
                         : 'text-tertiary-neutral dark:text-tertiary-neutral hover:text-gray-900 dark:hover:text-gray-50',
-                      'group flex cursor-pointer items-center gap-x-3 rounded-md px-3 py-1 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
+                      'group flex cursor-pointer items-center gap-x-3 rounded-md px-3 py-1 text-sm leading-6 font-semibold transition-colors duration-(--duration-small) hover:bg-gray-100 dark:hover:bg-gray-800',
                     ]"
                   >
                     {{ t(child.name) }}
diff --git a/frontend/src/components/shell/TopBar.vue b/frontend/src/components/shell/TopBar.vue
index 2cc0faeb3..0e2cda7fe 100644
--- a/frontend/src/components/shell/TopBar.vue
+++ b/frontend/src/components/shell/TopBar.vue
@@ -35,8 +35,8 @@ const loginStore = useLoginStore()
 const notificationsStore = useNotificationsStore()
 const { state: impersonationConsentState } = useImpersonationConsent()
 
-const topBarButtonsColorClasses =
-  'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-300'
+const topBarButtonClasses =
+  'flex rounded-full p-2.5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-(--duration-small)'
 const shakeNotificationsIcon = ref(false)
 
 const accountMenuOptions = computed(() => {
@@ -84,7 +84,7 @@ function openNotificationsDrawer() {
   >
     <button
       type="button"
-      class="text-tertiary-neutral dark:text-tertiary-neutral -m-2.5 p-2.5 transition-colors duration-300 hover:text-gray-900 lg:hidden dark:hover:text-gray-50"
+      class="text-tertiary-neutral dark:text-tertiary-neutral -mx-2.5 rounded-full p-2.5 transition-colors duration-(--duration-small) hover:bg-gray-100 hover:text-gray-900 lg:hidden dark:hover:bg-gray-800 dark:hover:text-gray-50"
       @click="emit('openSidebar')"
     >
       <span class="sr-only">{{ $t('shell.open_sidebar') }}</span>
@@ -97,7 +97,7 @@ function openNotificationsDrawer() {
     <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
       <div class="relative flex flex-1 items-center"></div>
       <!-- right-aligned before separator -->
-      <div class="flex items-center gap-x-4 lg:gap-x-6">
+      <div class="flex items-center gap-x-4">
         <!-- impersonation badge -->
         <ImpersonationBadge v-if="loginStore.isImpersonating" />
         <ImpersonationConsentBadge
@@ -109,124 +109,119 @@ function openNotificationsDrawer() {
           aria-hidden="true"
         />
 
-        <!-- help -->
-        <NeTooltip trigger-event="mouseenter focus" placement="bottom">
-          <template #trigger>
-            <a
-              href="https://nethserver.github.io/my/"
-              target="_blank"
-              rel="noreferrer"
-              :class="['-m-2.5 flex items-center gap-3 p-2.5', topBarButtonsColorClasses]"
-            >
-              <FontAwesomeIcon
-                :icon="faCircleQuestion"
-                class="h-6 w-6 shrink-0"
-                aria-hidden="true"
-              />
-            </a>
-          </template>
-          <template #content>
-            {{ $t('shell.help') }}
-          </template>
-        </NeTooltip>
+        <!-- icon controls -->
+        <div class="-mr-2.5 flex items-center gap-x-1">
+          <!-- help -->
+          <NeTooltip trigger-event="mouseenter focus" placement="bottom" class="flex">
+            <template #trigger>
+              <a
+                href="https://nethserver.github.io/my/"
+                target="_blank"
+                rel="noreferrer"
+                :class="[topBarButtonClasses, 'items-center gap-3']"
+              >
+                <FontAwesomeIcon
+                  :icon="faCircleQuestion"
+                  class="h-6 w-6 shrink-0"
+                  aria-hidden="true"
+                />
+              </a>
+            </template>
+            <template #content>
+              {{ $t('shell.help') }}
+            </template>
+          </NeTooltip>
 
-        <!-- toggle theme -->
-        <NeTooltip trigger-event="mouseenter focus" placement="bottom">
-          <template #trigger>
-            <button
-              type="button"
-              :class="['-m-2.5 flex p-2.5', topBarButtonsColorClasses]"
-              @click="themeStore.toggleTheme"
-            >
-              <span class="sr-only">{{ $t('shell.toggle_theme') }}</span>
-              <FontAwesomeIcon
-                :icon="themeStore.isLight ? faMoon : faSun"
-                class="h-6 w-6 shrink-0"
-                aria-hidden="true"
-              />
-            </button>
-          </template>
-          <template #content>
-            {{
-              themeStore.isLight
-                ? $t('shell.switch_to_dark_theme')
-                : $t('shell.switch_to_light_theme')
-            }}
-          </template>
-        </NeTooltip>
+          <!-- toggle theme -->
+          <NeTooltip trigger-event="mouseenter focus" placement="bottom" class="flex">
+            <template #trigger>
+              <button type="button" :class="topBarButtonClasses" @click="themeStore.toggleTheme">
+                <span class="sr-only">{{ $t('shell.toggle_theme') }}</span>
+                <FontAwesomeIcon
+                  :icon="themeStore.isLight ? faMoon : faSun"
+                  class="h-6 w-6 shrink-0"
+                  aria-hidden="true"
+                />
+              </button>
+            </template>
+            <template #content>
+              {{
+                themeStore.isLight
+                  ? $t('shell.switch_to_dark_theme')
+                  : $t('shell.switch_to_light_theme')
+              }}
+            </template>
+          </NeTooltip>
 
-        <!-- notifications -->
-        <NeTooltip trigger-event="mouseenter focus" placement="bottom">
-          <template #trigger>
-            <button
-              type="button"
-              :class="['-m-2.5 flex p-2.5', topBarButtonsColorClasses]"
-              @click="openNotificationsDrawer"
-            >
-              <span class="sr-only">{{ $t('shell.show_notifications') }}</span>
-              <FontAwesomeIcon
-                :icon="faBell"
-                :class="['h-6 w-6 shrink-0', { 'fa-shake': shakeNotificationsIcon }]"
-                style="--fa-animation-duration: 2s"
-                aria-hidden="true"
-              />
-            </button>
-          </template>
-          <template #content>
-            {{ $t('notifications.title') }}
-          </template>
-        </NeTooltip>
+          <!-- notifications -->
+          <NeTooltip trigger-event="mouseenter focus" placement="bottom" class="flex">
+            <template #trigger>
+              <button type="button" :class="topBarButtonClasses" @click="openNotificationsDrawer">
+                <span class="sr-only">{{ $t('shell.show_notifications') }}</span>
+                <FontAwesomeIcon
+                  :icon="faBell"
+                  :class="['h-6 w-6 shrink-0', { 'fa-shake': shakeNotificationsIcon }]"
+                  style="--fa-animation-duration: 2s"
+                  aria-hidden="true"
+                />
+              </button>
+            </template>
+            <template #content>
+              {{ $t('notifications.title') }}
+            </template>
+          </NeTooltip>
 
-        <!-- account dropdown -->
-        <NeTooltip trigger-event="mouseenter focus" placement="bottom">
-          <template #trigger>
-            <NeDropdown
-              :items="accountMenuOptions"
-              :align-to-right="true"
-              :open-menu-aria-label="$t('shell.open_account_menu')"
-              menu-classes="z-150!"
-              class="relative"
-            >
-              <template #button>
-                <button type="button" :class="['-m-2.5 flex p-2.5', topBarButtonsColorClasses]">
-                  <div class="flex items-center gap-2">
-                    <UserAvatar
-                      v-if="loginStore.userInfo"
-                      size="sm"
-                      :is-owner="loginStore.isOwner"
-                      :name="loginStore.userDisplayName"
-                      :logto-id="loginStore.userInfo.logto_id"
-                      :cache-key="loginStore.avatarVersion"
-                      :has-avatar="loginStore.userInfo.has_avatar"
-                    />
-                    <FontAwesomeIcon
-                      :icon="faChevronDown"
-                      class="h-3 w-3 shrink-0"
-                      aria-hidden="true"
-                    />
-                  </div>
-                </button>
-              </template>
-              <template #menuHeader>
-                <div class="space-y-1 px-4 py-2 text-sm">
-                  <NeSkeleton v-if="loginStore.loadingUserInfo" :lines="2" class="w-full" />
-                  <div v-else class="flex flex-col gap-1">
-                    <div class="font-medium text-gray-900 dark:text-gray-100">
-                      {{ loginStore.userDisplayName }}
+          <!-- account dropdown -->
+          <NeTooltip trigger-event="mouseenter focus" placement="bottom" class="flex">
+            <template #trigger>
+              <NeDropdown
+                :items="accountMenuOptions"
+                :align-to-right="true"
+                :open-menu-aria-label="$t('shell.open_account_menu')"
+                menu-classes="z-150!"
+                class="relative"
+              >
+                <template #button>
+                  <button type="button" :class="topBarButtonClasses">
+                    <div class="flex items-center gap-2">
+                      <UserAvatar
+                        v-if="loginStore.userInfo"
+                        size="sm"
+                        :is-owner="loginStore.isOwner"
+                        :name="loginStore.userDisplayName"
+                        :logto-id="loginStore.userInfo.logto_id"
+                        :cache-key="loginStore.avatarVersion"
+                        :has-avatar="loginStore.userInfo.has_avatar"
+                      />
+                      <FontAwesomeIcon
+                        :icon="faChevronDown"
+                        class="h-3 w-3 shrink-0"
+                        aria-hidden="true"
+                      />
                     </div>
-                    <div class="mb-1 text-gray-500 dark:text-gray-400">
-                      {{ loginStore.userInfo?.email }}
+                  </button>
+                </template>
+                <template #menuHeader>
+                  <div class="space-y-1 px-4 py-2 text-sm">
+                    <NeSkeleton v-if="loginStore.loadingUserInfo" :lines="2" class="w-full" />
+                    <div v-else class="flex flex-col gap-1">
+                      <div class="font-medium text-gray-900 dark:text-gray-100">
+                        {{ loginStore.userDisplayName }}
+                      </div>
+                      <div class="mb-1 text-gray-500 dark:text-gray-400">
+                        {{ loginStore.userInfo?.email }}
+                      </div>
                     </div>
                   </div>
-                </div>
-                <hr class="my-1" />
-              </template>
-            </NeDropdown>
-          </template>
-          <template #content>
-            {{ $t('shell.account') }}
-          </template>
-        </NeTooltip>
+                  <hr class="my-1" />
+                </template>
+              </NeDropdown>
+            </template>
+            <template #content>
+              {{ $t('shell.account') }}
+            </template>
+          </NeTooltip>
+        </div>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index c67a3ba5f..2ad1c2e8e 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -463,7 +463,7 @@ const localizedDateRange = computed(() => {
           <template #trigger>
             <div class="inline-block">
               <button
-                class="focus:ring-primary-500 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950 rounded-md px-2.5 py-1.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-300 transition-colors duration-200 hover:bg-gray-200/70 hover:text-gray-800 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-100 dark:ring-gray-500 dark:hover:bg-gray-600/30 dark:hover:text-gray-50"
+                class="focus:ring-primary-500 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950 rounded-md px-2.5 py-1.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-300 transition-colors duration-(--duration-small) hover:bg-gray-200/70 hover:text-gray-800 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-100 dark:ring-gray-500 dark:hover:bg-gray-600/30 dark:hover:text-gray-50"
                 type="button"
               >
                 <span class="flex items-center justify-center">

From e5464ddf1c0a658941d79cb46171849c5cb05365 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 26 Aug 2026 09:56:12 +0200
Subject: [PATCH 09/16] fix(ui): light icon for addons

---
 frontend/package-lock.json                 | 2 +-
 frontend/src/components/shell/SideMenu.vue | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8b6cc611a..61d0d94cf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1642,7 +1642,7 @@
     },
     "node_modules/@nethesis/nethesis-light-svg-icons": {
       "version": "6.2.1",
-      "resolved": "git+ssh://git@github.com/nethesis/Font-Awesome.git#42a41a56dbee88805a15d3433672bdd952a1f505",
+      "resolved": "git+ssh://git@github.com/nethesis/Font-Awesome.git#b701b3a6018f3327e0cedcda9650a621eeb2cbb2",
       "hasInstallScript": true,
       "license": "UNLICENSED",
       "dependencies": {
diff --git a/frontend/src/components/shell/SideMenu.vue b/frontend/src/components/shell/SideMenu.vue
index fadc9faba..b72f47213 100644
--- a/frontend/src/components/shell/SideMenu.vue
+++ b/frontend/src/components/shell/SideMenu.vue
@@ -34,6 +34,7 @@ import {
   faServer as falServer,
   faGrid2 as falGrid2,
   faTriangleExclamation as falTriangleExclamation,
+  faPuzzlePiece as falPuzzlePiece,
 } from '@nethesis/nethesis-light-svg-icons'
 import {
   canReadApplications,
@@ -112,7 +113,7 @@ const navigation = computed(() => {
       name: 'addons.title',
       to: 'addons',
       solidIcon: faPuzzlePiece,
-      lightIcon: faPuzzlePiece,
+      lightIcon: falPuzzlePiece,
     })
   }
 

From beb758d9bd426dca61b51a0b1e48bdc34b6ff8d6 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 26 Aug 2026 11:18:01 +0200
Subject: [PATCH 10/16] fix(ui): first inventory in system changes

---
 .../systems/SystemChangesTimeline.vue         | 122 +++++++-----------
 frontend/src/lib/systems/systems.ts           |   2 +
 2 files changed, 51 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 2ad1c2e8e..ecc661bbd 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -8,7 +8,6 @@ import { useInventoryTimeline } from '@/queries/systems/inventoryTimeline'
 import { useInventoryChanges } from '@/queries/systems/inventoryChanges'
 import { useInventoryDiffs } from '@/queries/systems/inventoryDiffs'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
-import { useLatestInventory } from '@/queries/systems/latestInventory'
 import {
   type InventoryDiff,
   type InventoryDiffCategory,
@@ -73,7 +72,6 @@ const {
 
 const { state: inventoryChangesState } = useInventoryChanges()
 const { state: systemDetailState } = useSystemDetail()
-const { state: latestInventoryState } = useLatestInventory()
 
 // ── Local state ──────────────────────────────────────────────────────────────
 const expandedGroups = ref<Set<string>>(new Set())
@@ -304,6 +302,34 @@ function getCategoryLabel(category: InventoryDiffCategory): string {
   return t(`system_detail.category_${category}`)
 }
 
+// ── Static milestones (rendered after the paginated timeline) ────────────────
+interface Milestone {
+  key: string
+  date: string
+  label: string
+}
+
+const milestones = computed<Milestone[]>(() => {
+  const system = systemDetailState.value.data
+  if (!system) return []
+
+  return [
+    {
+      key: 'first_inventory',
+      date: system.first_inventory,
+      label: t('system_detail.first_inventory_sent'),
+    },
+    {
+      key: 'registered',
+      date: system.registered_at,
+      label: t('system_detail.system_registered'),
+    },
+    { key: 'created', date: system.created_at, label: t('system_detail.system_created') },
+  ]
+    .filter((m): m is Milestone => !!m.date)
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+})
+
 // ── Date range model (bridges fromDate/toDate refs to VueDatePicker range) ────
 const dateRangeModel = computed<string[] | null>({
   get: () => (fromDate.value || toDate.value ? [fromDate.value || '', toDate.value || ''] : null),
@@ -757,78 +783,28 @@ const localizedDateRange = computed(() => {
     </div>
 
     <!-- Static milestone events: first inventory sent, system registration and creation -->
-    <template v-if="latestInventoryState.data?.created_at">
-      <!-- First inventory sent -->
-      <div class="relative mb-8 flex items-start">
-        <div class="hidden w-36 shrink-0 pt-0.5 pr-6 text-right md:block">
-          <span class="text-tertiary-neutral font-medium">
-            {{ formatGroupDate(latestInventoryState.data.created_at.slice(0, 10)) }}
-          </span>
-        </div>
-        <div
-          class="absolute top-1.75 left-0.75 z-10 size-2 rounded-full bg-gray-300 ring-4 ring-gray-50 md:left-34.75 dark:bg-gray-600 dark:ring-gray-900"
-        ></div>
-        <div class="min-w-0 flex-1 pl-6 md:pl-10">
-          <span class="text-tertiary-neutral mb-4 block text-sm font-medium md:hidden">
-            {{ formatGroupDate(latestInventoryState.data.created_at.slice(0, 10)) }}
-          </span>
-          <span class="text-secondary-neutral font-medium">
-            {{ t('system_detail.first_inventory_sent') }}
-          </span>
-          <p class="text-tertiary-neutral mt-0.5">
-            {{ formatTimeNoSeconds(new Date(latestInventoryState.data.created_at), locale, 'UTC') }}
-          </p>
-        </div>
-      </div>
-    </template>
-
-    <!-- Static milestone events: system registration and creation -->
-    <template v-if="systemDetailState.data">
-      <!-- System registration -->
-      <div v-if="systemDetailState.data.registered_at" class="relative mb-8 flex items-start">
-        <div class="hidden w-36 shrink-0 pt-0.5 pr-6 text-right md:block">
-          <span class="text-tertiary-neutral font-medium">
-            {{ formatGroupDate(systemDetailState.data.registered_at.slice(0, 10)) }}
-          </span>
-        </div>
-        <div
-          class="absolute top-1.75 left-0.75 z-10 size-2 rounded-full bg-gray-300 ring-4 ring-gray-50 md:left-34.75 dark:bg-gray-600 dark:ring-gray-900"
-        ></div>
-        <div class="min-w-0 flex-1 pl-6 md:pl-10">
-          <span class="text-tertiary-neutral mb-4 block text-sm font-medium md:hidden">
-            {{ formatGroupDate(systemDetailState.data.registered_at.slice(0, 10)) }}
-          </span>
-          <span class="text-secondary-neutral font-medium">
-            {{ t('system_detail.system_registered') }}
-          </span>
-          <p class="text-tertiary-neutral mt-0.5">
-            {{ formatTimeNoSeconds(new Date(systemDetailState.data.registered_at), locale, 'UTC') }}
-          </p>
-        </div>
+    <div
+      v-for="milestone in milestones"
+      :key="milestone.key"
+      class="relative mb-8 flex items-start"
+    >
+      <div class="hidden w-36 shrink-0 pt-0.5 pr-6 text-right md:block">
+        <span class="text-tertiary-neutral font-medium">
+          {{ formatGroupDate(milestone.date.slice(0, 10)) }}
+        </span>
       </div>
-
-      <!-- System creation -->
-      <div v-if="systemDetailState.data.created_at" class="relative mb-8 flex items-start">
-        <div class="hidden w-36 shrink-0 pt-0.5 pr-6 text-right md:block">
-          <span class="text-tertiary-neutral font-medium">
-            {{ formatGroupDate(systemDetailState.data.created_at.slice(0, 10)) }}
-          </span>
-        </div>
-        <div
-          class="absolute top-1.75 left-0.75 z-10 size-2 rounded-full bg-gray-300 ring-4 ring-gray-50 md:left-34.75 dark:bg-gray-600 dark:ring-gray-900"
-        ></div>
-        <div class="min-w-0 flex-1 pl-6 md:pl-10">
-          <span class="text-tertiary-neutral mb-4 block text-sm font-medium md:hidden">
-            {{ formatGroupDate(systemDetailState.data.created_at.slice(0, 10)) }}
-          </span>
-          <span class="text-secondary-neutral font-medium">
-            {{ t('system_detail.system_created') }}
-          </span>
-          <p class="text-tertiary-neutral mt-0.5">
-            {{ formatTimeNoSeconds(new Date(systemDetailState.data.created_at), locale, 'UTC') }}
-          </p>
-        </div>
+      <div
+        class="absolute top-1.75 left-0.75 z-10 size-2 rounded-full bg-gray-300 ring-4 ring-gray-50 md:left-34.75 dark:bg-gray-600 dark:ring-gray-900"
+      ></div>
+      <div class="min-w-0 flex-1 pl-6 md:pl-10">
+        <span class="text-tertiary-neutral mb-4 block text-sm font-medium md:hidden">
+          {{ formatGroupDate(milestone.date.slice(0, 10)) }}
+        </span>
+        <span class="text-secondary-neutral font-medium">{{ milestone.label }}</span>
+        <p class="text-tertiary-neutral mt-0.5">
+          {{ formatTimeNoSeconds(new Date(milestone.date), locale, 'UTC') }}
+        </p>
       </div>
-    </template>
+    </div>
   </div>
 </template>
diff --git a/frontend/src/lib/systems/systems.ts b/frontend/src/lib/systems/systems.ts
index 349b863bc..4e971961e 100644
--- a/frontend/src/lib/systems/systems.ts
+++ b/frontend/src/lib/systems/systems.ts
@@ -49,6 +49,8 @@ export const SystemSchema = v.object({
   suspended_at: v.optional(v.string()),
   last_heartbeat: v.optional(v.string()),
   last_inventory: v.optional(v.string()),
+  first_heartbeat: v.optional(v.string()),
+  first_inventory: v.optional(v.string()),
   rebranding_enabled: v.optional(v.boolean()),
   organization: v.object({
     id: v.string(),

From 4f44947a395f76e39b6183e4c1e3e0b439dcc81f Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 26 Aug 2026 11:57:31 +0200
Subject: [PATCH 11/16] fix(ui): prevent deletion of addons in use

---
 .../src/components/addons/AddonInUseModal.vue | 43 +++++++++++++++++++
 .../components/addons/AddonsCatalogPanel.vue  | 25 ++++++++++-
 frontend/src/i18n/en/translation.json         |  4 ++
 frontend/src/i18n/it/translation.json         |  4 ++
 frontend/src/lib/addons/addons.ts             |  4 ++
 frontend/src/lib/addons/systemAddons.ts       |  3 ++
 6 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/addons/AddonInUseModal.vue

diff --git a/frontend/src/components/addons/AddonInUseModal.vue b/frontend/src/components/addons/AddonInUseModal.vue
new file mode 100644
index 000000000..338fa30a0
--- /dev/null
+++ b/frontend/src/components/addons/AddonInUseModal.vue
@@ -0,0 +1,43 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  Shown instead of the delete confirmation when the catalog reports the add-on as
+  in use: the backend refuses the DELETE, so there is nothing to confirm and the
+  modal only explains why.
+-->
+
+<script setup lang="ts">
+import { NeModal } from '@nethesis/vue-components'
+import type { Addon } from '@/lib/addons/addons'
+
+const { visible = false, addon = undefined } = defineProps<{
+  visible: boolean
+  addon: Addon | undefined
+}>()
+
+const emit = defineEmits(['close'])
+</script>
+
+<template>
+  <NeModal
+    :visible="visible"
+    :title="$t('addons.addon_in_use')"
+    kind="warning"
+    :primary-label="$t('common.close')"
+    cancel-label=""
+    primary-button-kind="primary"
+    :close-aria-label="$t('common.close')"
+    @close="emit('close')"
+    @primary-click="emit('close')"
+  >
+    <div class="space-y-4">
+      <p>
+        {{ $t('addons.addon_in_use_description', { name: addon?.display_name }) }}
+      </p>
+      <p>
+        {{ $t('addons.addon_in_use_report_hint') }}
+      </p>
+    </div>
+  </NeModal>
+</template>
diff --git a/frontend/src/components/addons/AddonsCatalogPanel.vue b/frontend/src/components/addons/AddonsCatalogPanel.vue
index 4c3735812..792333c15 100644
--- a/frontend/src/components/addons/AddonsCatalogPanel.vue
+++ b/frontend/src/components/addons/AddonsCatalogPanel.vue
@@ -17,6 +17,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
+  NeBadgeV2,
   NeButton,
   NeDropdown,
   NeDropdownFilterV2,
@@ -58,6 +59,7 @@ import {
 } from '@/lib/tablePageSize'
 import { useAddons } from '@/queries/addons/addons'
 import { useLoginStore } from '@/stores/login'
+import AddonInUseModal from './AddonInUseModal.vue'
 import CreateOrEditAddonDrawer from './CreateOrEditAddonDrawer.vue'
 import DeleteAddonModal from './DeleteAddonModal.vue'
 
@@ -79,6 +81,7 @@ const pageSize = ref(DEFAULT_PAGE_SIZE)
 const currentAddon = ref<Addon | undefined>()
 const isShownCreateOrEditAddonDrawer = ref(false)
 const isShownDeleteAddonModal = ref(false)
+const isShownAddonInUseModal = ref(false)
 
 const addons = computed(() => state.value.data ?? [])
 
@@ -235,6 +238,11 @@ function showDeleteAddonModal(addon: Addon) {
   isShownDeleteAddonModal.value = true
 }
 
+function showAddonInUseModal(addon: Addon) {
+  currentAddon.value = addon
+  isShownAddonInUseModal.value = true
+}
+
 function getKebabMenuItems(addon: Addon): NeDropdownItem[] {
   return [
     {
@@ -242,7 +250,9 @@ function getKebabMenuItems(addon: Addon): NeDropdownItem[] {
       label: t('common.delete'),
       icon: faTrash,
       danger: true,
-      action: () => showDeleteAddonModal(addon),
+      // an add-on any system was ever granted cannot be deleted: explain the
+      // refusal instead of asking to confirm a delete that would fail
+      action: () => (addon.in_use ? showAddonInUseModal(addon) : showDeleteAddonModal(addon)),
     },
   ]
 }
@@ -381,7 +391,12 @@ const onSort = (payload: SortEvent) => {
         <NeTableBody>
           <NeTableRow v-for="row in paginatedRows" :key="row.addon.id">
             <NeTableCell :data-label="$t('addons.addon_name')">
-              <div class="font-medium">{{ row.addon.display_name }}</div>
+              <div class="flex items-center gap-2">
+                <span class="font-medium">{{ row.addon.display_name }}</span>
+                <NeBadgeV2 v-if="!row.addon.in_use" kind="gray" size="xs">
+                  {{ $t('addons.unused') }}
+                </NeBadgeV2>
+              </div>
               <div v-if="row.addon.description" class="text-tertiary-neutral truncate">
                 {{ row.addon.description }}
               </div>
@@ -461,5 +476,11 @@ const onSort = (payload: SortEvent) => {
       :addon="currentAddon"
       @close="isShownDeleteAddonModal = false"
     />
+    <!-- add-on in use modal -->
+    <AddonInUseModal
+      :visible="isShownAddonInUseModal"
+      :addon="currentAddon"
+      @close="isShownAddonInUseModal = false"
+    />
   </div>
 </template>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 0341de94b..7012ba288 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -908,6 +908,10 @@
     "cannot_create_addon": "Cannot create add-on",
     "cannot_save_addon": "Cannot save add-on",
     "cannot_delete_addon": "Cannot delete add-on",
+    "unused": "Unused",
+    "addon_in_use": "Add-on in use",
+    "addon_in_use_description": "{name} has been granted to at least one system, so it cannot be deleted. Revoked and expired grants count too: they are kept for audit.",
+    "addon_in_use_report_hint": "The Report tab lists the systems that have this add-on.",
     "product_type_required": "Choose a product type",
     "application_cannot_be_empty": "Choose an application",
     "display_name_cannot_be_empty": "Display name cannot be empty",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 65b63b352..db036d686 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -835,6 +835,10 @@
     "cannot_create_addon": "Impossibile creare l'add-on",
     "cannot_save_addon": "Impossibile salvare l'add-on",
     "cannot_delete_addon": "Impossibile eliminare l'add-on",
+    "unused": "Non utilizzato",
+    "addon_in_use": "Add-on in uso",
+    "addon_in_use_description": "{name} è stato assegnato ad almeno un sistema, quindi non può essere eliminato. Anche le assegnazioni revocate e scadute contano: vengono conservate per l'audit.",
+    "addon_in_use_report_hint": "La scheda Report elenca i sistemi che hanno questo add-on.",
     "product_type_required": "Scegli un tipo di prodotto",
     "application_cannot_be_empty": "Scegli un'applicazione",
     "display_name_cannot_be_empty": "Il nome visualizzato non può essere vuoto",
diff --git a/frontend/src/lib/addons/addons.ts b/frontend/src/lib/addons/addons.ts
index b68cff37b..e72c722a9 100644
--- a/frontend/src/lib/addons/addons.ts
+++ b/frontend/src/lib/addons/addons.ts
@@ -79,6 +79,10 @@ export const AddonSchema = v.object({
   legacy_alias: v.optional(v.string()),
   // the application a module add-on belongs to, empty for a system-wide service
   applies_to: v.optional(v.string()),
+  // true when any grant references the add-on — revoked and expired ones
+  // included: they are kept for audit and the foreign key blocks the delete all
+  // the same. Lets the catalog explain the refusal before asking to confirm.
+  in_use: v.boolean(),
   created_at: v.string(),
   updated_at: v.string(),
 })
diff --git a/frontend/src/lib/addons/systemAddons.ts b/frontend/src/lib/addons/systemAddons.ts
index 47f2fff43..29898c9ba 100644
--- a/frontend/src/lib/addons/systemAddons.ts
+++ b/frontend/src/lib/addons/systemAddons.ts
@@ -304,6 +304,9 @@ export const composeSystemAddonRows = ({
         description: '',
         scoped: !!scope,
         kind: scope ? 'module' : 'service',
+        // the row exists because a grant references it, which is precisely what
+        // in_use means
+        in_use: true,
         created_at: '',
         updated_at: '',
       },

From d1248b1532684bb7443bd08a0fdbdfb51f668a06 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 26 Aug 2026 15:28:55 +0200
Subject: [PATCH 12/16] fix(ui): add system addons empty state

---
 .../components/systems/SystemAddonsPanel.vue  | 26 ++++++++++++++++---
 frontend/src/i18n/en/translation.json         |  2 ++
 frontend/src/i18n/it/translation.json         |  2 ++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/systems/SystemAddonsPanel.vue b/frontend/src/components/systems/SystemAddonsPanel.vue
index 1102fd49e..7dee57277 100644
--- a/frontend/src/components/systems/SystemAddonsPanel.vue
+++ b/frontend/src/components/systems/SystemAddonsPanel.vue
@@ -13,7 +13,8 @@
 -->
 
 <script setup lang="ts">
-import { NeInlineNotification } from '@nethesis/vue-components'
+import { faPuzzlePiece } from '@fortawesome/free-solid-svg-icons'
+import { NeEmptyState, NeInlineNotification } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { composeSystemAddonRows } from '@/lib/addons/systemAddons'
@@ -40,11 +41,21 @@ const selectedAddonId = computed(() => (route.query.addon as string) ?? '')
 
 const isLoading = computed(
   () =>
+    systemDetail.value.status === 'pending' ||
     addonsState.value.status === 'pending' ||
     availableState.value.status === 'pending' ||
     applicationsState.value.status === 'pending',
 )
 
+// Add-ons need a system that has registered and sent an inventory: the API
+// blanks system_key until registration, so there is nothing to buy against,
+// and the product type is only learned from the first inventory — before that
+// the set of add-ons that apply cannot be worked out, and a NethServer
+// cluster has no application instances to scope a module add-on to either.
+const isSystemReady = computed(
+  () => !!system.value?.registered_at && !!system.value?.first_inventory,
+)
+
 const isRefreshing = computed(
   () => addonsAsyncStatus.value === 'loading' && addonsState.value.status !== 'pending',
 )
@@ -82,7 +93,7 @@ function closeAddon() {
   <div>
     <!-- page description: on a firewall the card states the add-on in full, so
          there is nothing to open and the last sentence would be a dead end -->
-    <div class="text-tertiary-neutral mb-8 max-w-3xl">
+    <div v-if="isLoading || isSystemReady" class="text-tertiary-neutral mb-8 max-w-3xl">
       {{
         system?.type === 'nsec'
           ? $t('addons.system_addons_description_nsec')
@@ -113,7 +124,16 @@ function closeAddon() {
       :description="applicationsState.error.message"
       class="mb-6"
     />
-    <template v-if="isGridShown">
+    <!-- nothing to show yet: the system has not registered or has never sent
+         an inventory, so no add-on can be listed or configured for it -->
+    <NeEmptyState
+      v-if="!isLoading && !isSystemReady"
+      :title="$t('addons.no_addons_configured')"
+      :description="$t('addons.no_addons_configured_description')"
+      :icon="faPuzzlePiece"
+      class="bg-white dark:bg-gray-950"
+    />
+    <template v-else-if="isGridShown">
       <SystemAddonDetail
         v-if="selectedAddonId"
         :addon-id="selectedAddonId"
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 7012ba288..1b96f809c 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -924,6 +924,8 @@
     "cannot_retrieve_applications": "Cannot retrieve the applications of this system",
     "no_system_addons": "No add-ons available",
     "no_system_addons_description": "There are no add-ons available for this system.",
+    "no_addons_configured": "No add-ons configured",
+    "no_addons_configured_description": "Add-ons can be configured only on registered systems that have sent at least one inventory.",
     "no_applications_found": "No applications found",
     "filter_applications": "Filter applications",
     "application_type": "Application type",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index db036d686..3a0aa34d6 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -851,6 +851,8 @@
     "cannot_retrieve_applications": "Impossibile recuperare le applicazioni di questo sistema",
     "no_system_addons": "Nessun add-on disponibile",
     "no_system_addons_description": "Non ci sono add-on disponibili per questo sistema.",
+    "no_addons_configured": "Nessun add-on configurato",
+    "no_addons_configured_description": "Gli add-on possono essere configurati solo su sistemi registrati che hanno inviato almeno un inventario.",
     "no_applications_found": "Nessuna applicazione trovata",
     "filter_applications": "Filtra applicazioni",
     "application_type": "Tipo di applicazione",

From 2ecf779bf1d4a166496b10ad1c27d4bd820c19b7 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 26 Aug 2026 16:37:45 +0200
Subject: [PATCH 13/16] fix(ui): layout of system addons cards

---
 .../systems/addons/SystemAddonCard.vue        | 50 +++++++-----
 .../systems/addons/SystemAddonDetail.vue      | 77 +++++++------------
 .../src/composables/useSystemAddonActions.ts  | 45 +++++------
 3 files changed, 81 insertions(+), 91 deletions(-)

diff --git a/frontend/src/components/systems/addons/SystemAddonCard.vue b/frontend/src/components/systems/addons/SystemAddonCard.vue
index 9092b6d7e..507120082 100644
--- a/frontend/src/components/systems/addons/SystemAddonCard.vue
+++ b/frontend/src/components/systems/addons/SystemAddonCard.vue
@@ -16,13 +16,13 @@
 <script setup lang="ts">
 import { faArrowRightLong } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { NeButton, NeCard } from '@nethesis/vue-components'
+import { NeButton, NeCard, NeDropdown } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import ApplicationLogo from '@/components/applications/ApplicationLogo.vue'
 import DataItem from '@/components/common/DataItem.vue'
 import SystemLogo from '@/components/systems/SystemLogo.vue'
 import UserAvatar from '@/components/users/UserAvatar.vue'
-import { useSystemAddonActions } from '@/composables/useSystemAddonActions'
+import { useSystemAddonActions, type AddonRowActions } from '@/composables/useSystemAddonActions'
 import {
   ADDON_ROW_STATUSES,
   getOrderNumber,
@@ -66,12 +66,14 @@ const statusLines = computed(() =>
   })),
 )
 
-// At most one entry, by construction — see getAddonActions. Rendered as a list
-// all the same, so that a second one would appear beside the first instead of
-// being silently dropped. Buying opens the shop from the item itself; the
+// Buying gets a button at the foot of the card, the administrative actions a
+// kebab in its corner. Buying opens the shop from the item itself; the
 // administrative actions travel up to the grid, which owns the modal.
-const actions = computed(() =>
-  row ? getAddonActions(row, (action) => emit('action', row, action)) : [],
+const actions = computed(
+  (): AddonRowActions =>
+    row
+      ? getAddonActions(row, (action) => emit('action', row, action))
+      : { buy: undefined, menu: [] },
 )
 </script>
 
@@ -80,10 +82,19 @@ const actions = computed(() =>
     <div class="flex h-full flex-col gap-5">
       <!-- logo + name + description -->
       <div class="flex flex-col gap-2">
-        <div class="flex items-center gap-3">
-          <ApplicationLogo v-if="applicationId" :app="applicationId" />
-          <SystemLogo v-else system="nsec" />
-          <p class="font-medium text-gray-900 dark:text-gray-100">{{ addon.display_name }}</p>
+        <div class="flex min-h-10 items-center justify-between gap-4">
+          <div class="flex items-center gap-3">
+            <ApplicationLogo v-if="applicationId" :app="applicationId" />
+            <SystemLogo v-else system="nsec" />
+            <p class="font-medium text-gray-900 dark:text-gray-100">{{ addon.display_name }}</p>
+          </div>
+          <!-- kebab menu -->
+          <NeDropdown
+            v-if="actions.menu.length"
+            :items="actions.menu"
+            :align-to-right="true"
+            :open-menu-aria-label="$t('ne_dropdown.open_menu')"
+          />
         </div>
         <p v-if="addon.description" class="text-tertiary-neutral">{{ addon.description }}</p>
       </div>
@@ -170,15 +181,14 @@ const actions = computed(() =>
       </div>
       <!-- pushed to the bottom so cards of differing height line their buttons up -->
       <div class="mt-auto flex justify-end gap-2">
-        <template v-if="row">
-          <NeButton v-for="item in actions" :key="item.id" kind="tertiary" @click="item.action?.()">
-            <template v-if="item.icon" #prefix>
-              <FontAwesomeIcon :icon="item.icon" class="size-4" aria-hidden="true" />
-            </template>
-            {{ item.label }}
-          </NeButton>
-        </template>
-        <NeButton v-else kind="tertiary" @click="emit('details')">
+        <NeButton v-if="actions.buy" kind="tertiary" @click="actions.buy.action?.()">
+          <template v-if="actions.buy.icon" #prefix>
+            <FontAwesomeIcon :icon="actions.buy.icon" class="size-4" aria-hidden="true" />
+          </template>
+          {{ actions.buy.label }}
+        </NeButton>
+        <!-- a card that only summarises hands off to the detail table instead -->
+        <NeButton v-else-if="!row" kind="tertiary" @click="emit('details')">
           {{ $t('addons.details') }}
           <template #suffix>
             <FontAwesomeIcon :icon="faArrowRightLong" class="size-4" aria-hidden="true" />
diff --git a/frontend/src/components/systems/addons/SystemAddonDetail.vue b/frontend/src/components/systems/addons/SystemAddonDetail.vue
index 0cb5d3030..3843fc701 100644
--- a/frontend/src/components/systems/addons/SystemAddonDetail.vue
+++ b/frontend/src/components/systems/addons/SystemAddonDetail.vue
@@ -12,11 +12,7 @@
 -->
 
 <script setup lang="ts">
-import {
-  faArrowLeft,
-  faArrowUpRightFromSquare,
-  faMagnifyingGlass,
-} from '@fortawesome/free-solid-svg-icons'
+import { faArrowLeft, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   NeButton,
@@ -76,7 +72,7 @@ const emit = defineEmits<{ back: [] }>()
 const { t } = useI18n()
 const loginStore = useLoginStore()
 const { state: systemDetail } = useSystemDetail()
-const { canBuy, openShop, getKebabMenuItems, formatValidity } = useSystemAddonActions()
+const { getAddonActions, formatValidity } = useSystemAddonActions()
 
 const textFilter = ref('')
 const debouncedTextFilter = ref('')
@@ -134,8 +130,22 @@ const filteredRows = computed(() => {
   })
 })
 
-const paginatedRows = computed(() =>
-  filteredRows.value.slice((pageNum.value - 1) * pageSize.value, pageNum.value * pageSize.value),
+function showActionModal(row: SystemAddonRow, action: AddonAction) {
+  currentRow.value = row
+  currentAction.value = action
+  isShownActionModal.value = true
+}
+
+// Every visible row with what it offers, built once here rather than on each
+// reference from the template. The modal those actions open stays with this
+// component; the composable only hands back the items.
+const pageRows = computed(() =>
+  filteredRows.value
+    .slice((pageNum.value - 1) * pageSize.value, pageNum.value * pageSize.value)
+    .map((row) => ({
+      row,
+      actions: getAddonActions(row, (action) => showActionModal(row, action)),
+    })),
 )
 
 const isFiltered = computed(
@@ -191,17 +201,6 @@ function clearFilters() {
   purchaserFilter.value = []
   statusFilter.value = []
 }
-
-function showActionModal(row: SystemAddonRow, action: AddonAction) {
-  currentRow.value = row
-  currentAction.value = action
-  isShownActionModal.value = true
-}
-
-// The kebab is the table's own: the composable hands back the items and this
-// component keeps the modal they open.
-const kebabMenuItems = (row: SystemAddonRow) =>
-  getKebabMenuItems(row, (action) => showActionModal(row, action))
 </script>
 
 <template>
@@ -294,7 +293,7 @@ const kebabMenuItems = (row: SystemAddonRow) =>
         </NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
-        <NeTableRow v-for="row in paginatedRows" :key="`${row.addon.id} ${row.scope}`">
+        <NeTableRow v-for="{ row, actions } in pageRows" :key="`${row.addon.id} ${row.scope}`">
           <NeTableCell :data-label="firstColumnLabel">
             <div class="flex items-center gap-2">
               <ApplicationLogo v-if="row.applicationId" :app="row.applicationId" />
@@ -360,38 +359,18 @@ const kebabMenuItems = (row: SystemAddonRow) =>
             <AddonStatusIcon :status="getRowStatus(row)" />
           </NeTableCell>
           <NeTableCell :data-label="$t('common.actions')">
-            <div class="-ml-2.5 flex gap-2 2xl:ml-0 2xl:justify-end">
-              <!-- when buying is the only thing on offer it gets a button of its
-                   own rather than hiding inside a one-item kebab -->
-              <NeButton
-                v-if="canBuy(row) && !kebabMenuItems(row).length"
-                kind="tertiary"
-                @click="openShop(row)"
-              >
-                <template #prefix>
-                  <FontAwesomeIcon
-                    :icon="faArrowUpRightFromSquare"
-                    class="size-4"
-                    aria-hidden="true"
-                  />
+            <div class="-ml-2.5 flex items-center gap-2 2xl:ml-0 2xl:justify-end">
+              <!-- buying gets a button of its own rather than hiding inside a
+                   one-item kebab -->
+              <NeButton v-if="actions.buy" kind="tertiary" @click="actions.buy.action?.()">
+                <template v-if="actions.buy.icon" #prefix>
+                  <FontAwesomeIcon :icon="actions.buy.icon" class="size-4" aria-hidden="true" />
                 </template>
-                {{ $t('addons.buy') }}
+                {{ actions.buy.label }}
               </NeButton>
               <NeDropdown
-                v-else-if="kebabMenuItems(row).length || canBuy(row)"
-                :items="[
-                  ...kebabMenuItems(row),
-                  ...(canBuy(row)
-                    ? [
-                        {
-                          id: 'buy',
-                          label: t('addons.buy'),
-                          icon: faArrowUpRightFromSquare,
-                          action: () => openShop(row),
-                        },
-                      ]
-                    : []),
-                ]"
+                v-if="actions.menu.length"
+                :items="actions.menu"
                 :align-to-right="true"
                 :open-menu-aria-label="$t('ne_dropdown.open_menu')"
               />
diff --git a/frontend/src/composables/useSystemAddonActions.ts b/frontend/src/composables/useSystemAddonActions.ts
index 27ffc80b8..d8e406364 100644
--- a/frontend/src/composables/useSystemAddonActions.ts
+++ b/frontend/src/composables/useSystemAddonActions.ts
@@ -11,6 +11,13 @@ import { formatDateNoTime } from '@/lib/dateTime'
 import { canBuyAddons, isAddonAdmin } from '@/lib/permissions'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 
+// The actions of one row, split the way they are rendered: buying gets a button
+// of its own, the administrative actions live in a kebab.
+export type AddonRowActions = {
+  buy: NeDropdownItem | undefined
+  menu: NeDropdownItem[]
+}
+
 // What a viewer may do with one add-on of one system, and how a grant reads.
 // Shared by the NethSecurity card and the NethServer detail table so the rules
 // cannot drift apart: which revocations can be undone by buying again, and what
@@ -89,27 +96,25 @@ export const useSystemAddonActions = () => {
     return items
   }
 
-  // Everything on offer for one row, in one list. It holds AT MOST ONE entry:
-  // buying needs manage:addons WITHOUT owner-level authority (canBuyAddons),
-  // the administrative three need exactly that authority (isAddonAdmin), and
-  // the chain above pushes one of them at a time. Callers may render it as a
-  // single button on that basis.
+  // Only one side is ever filled: buying needs manage:addons WITHOUT owner-level
+  // authority (canBuyAddons), the administrative three need exactly that
+  // authority (isAddonAdmin). Callers render the two independently all the
+  // same, so an action added to the other side appears beside it instead of
+  // being silently dropped.
   const getAddonActions = (
     row: SystemAddonRow,
     onSelect: (action: AddonAction) => void,
-  ): NeDropdownItem[] => [
-    ...getKebabMenuItems(row, onSelect),
-    ...(canBuy(row)
-      ? [
-          {
-            id: 'buy',
-            label: t('addons.buy'),
-            icon: faArrowUpRightFromSquare,
-            action: () => openShop(row),
-          },
-        ]
-      : []),
-  ]
+  ): AddonRowActions => ({
+    buy: canBuy(row)
+      ? {
+          id: 'buy',
+          label: t('addons.buy'),
+          icon: faArrowUpRightFromSquare,
+          action: () => openShop(row),
+        }
+      : undefined,
+    menu: getKebabMenuItems(row, onSelect),
+  })
 
   // Dates only: a licence period is counted in days, so the time of day is noise.
   const formatValidity = (row: SystemAddonRow) => {
@@ -128,10 +133,6 @@ export const useSystemAddonActions = () => {
   }
 
   return {
-    isSystemBlocked,
-    canBuy,
-    openShop,
-    getKebabMenuItems,
     getAddonActions,
     formatValidity,
   }

From 05524331ade1a1ef56f9a4e202927269aa558bec Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 26 Aug 2026 17:05:42 +0200
Subject: [PATCH 14/16] fix(ui): fix i18n strings

---
 frontend/src/components/account/ChangePasswordDrawer.vue    | 2 +-
 frontend/src/components/account/ChangePictureDrawer.vue     | 2 +-
 .../src/components/account/apiKeys/CreateApiKeyDrawer.vue   | 2 +-
 frontend/src/components/alerts/AddAlertNoteDrawer.vue       | 2 +-
 frontend/src/components/alerts/AlertDetailsDrawer.vue       | 2 +-
 frontend/src/components/alerts/AssignAlertDrawer.vue        | 2 +-
 .../src/components/alerts/EditEmailNotificationsDrawer.vue  | 2 +-
 .../components/alerts/EditTelegramNotificationsDrawer.vue   | 2 +-
 .../components/alerts/EditWebhookNotificationsDrawer.vue    | 2 +-
 frontend/src/components/alerts/MuteAlertDrawer.vue          | 2 +-
 .../components/applications/AssignOrganizationDrawer.vue    | 2 +-
 frontend/src/components/applications/SetNotesDrawer.vue     | 2 +-
 .../src/components/customers/CreateOrEditCustomerDrawer.vue | 2 +-
 .../distributors/CreateOrEditDistributorDrawer.vue          | 2 +-
 .../src/components/resellers/CreateOrEditResellerDrawer.vue | 2 +-
 frontend/src/components/shell/TopBar.vue                    | 6 +++++-
 .../src/components/systems/CreateOrEditSystemDrawer.vue     | 2 +-
 frontend/src/components/users/CreateOrEditUserDrawer.vue    | 2 +-
 18 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/account/ChangePasswordDrawer.vue b/frontend/src/components/account/ChangePasswordDrawer.vue
index 41b88ab9c..4c575909a 100644
--- a/frontend/src/components/account/ChangePasswordDrawer.vue
+++ b/frontend/src/components/account/ChangePasswordDrawer.vue
@@ -225,7 +225,7 @@ async function validateAndChangePassword() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="$t('account.change_password')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @close="closeDrawer"
   >
     <form @submit.prevent>
diff --git a/frontend/src/components/account/ChangePictureDrawer.vue b/frontend/src/components/account/ChangePictureDrawer.vue
index 549b518b4..f3563a1ee 100644
--- a/frontend/src/components/account/ChangePictureDrawer.vue
+++ b/frontend/src/components/account/ChangePictureDrawer.vue
@@ -130,7 +130,7 @@ function savePicture() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="$t('account.change_picture')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @close="closeDrawer"
   >
     <form @submit.prevent>
diff --git a/frontend/src/components/account/apiKeys/CreateApiKeyDrawer.vue b/frontend/src/components/account/apiKeys/CreateApiKeyDrawer.vue
index 743af4357..315e1d1fd 100644
--- a/frontend/src/components/account/apiKeys/CreateApiKeyDrawer.vue
+++ b/frontend/src/components/account/apiKeys/CreateApiKeyDrawer.vue
@@ -197,7 +197,7 @@ function copyKeyAndCloseDrawer() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="$t('account.api_keys.create_api_key')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/alerts/AddAlertNoteDrawer.vue b/frontend/src/components/alerts/AddAlertNoteDrawer.vue
index dd0a06652..cbc5d6175 100644
--- a/frontend/src/components/alerts/AddAlertNoteDrawer.vue
+++ b/frontend/src/components/alerts/AddAlertNoteDrawer.vue
@@ -110,7 +110,7 @@ function handleSubmit() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="t('alerts.add_comment_title', { alertname: alert?.labels?.alertname ?? '' })"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/alerts/AlertDetailsDrawer.vue b/frontend/src/components/alerts/AlertDetailsDrawer.vue
index 3fe62f68d..de6a9f26e 100644
--- a/frontend/src/components/alerts/AlertDetailsDrawer.vue
+++ b/frontend/src/components/alerts/AlertDetailsDrawer.vue
@@ -81,7 +81,7 @@ function closeDrawer() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="t('alerts.alert_details')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @close="closeDrawer"
   >
     <div v-if="alert" class="space-y-7">
diff --git a/frontend/src/components/alerts/AssignAlertDrawer.vue b/frontend/src/components/alerts/AssignAlertDrawer.vue
index 604e3198c..68573d199 100644
--- a/frontend/src/components/alerts/AssignAlertDrawer.vue
+++ b/frontend/src/components/alerts/AssignAlertDrawer.vue
@@ -89,7 +89,7 @@ function handleSubmit() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="t('alerts.assign_alert_title', { alertname: alert?.labels?.alertname ?? '' })"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/alerts/EditEmailNotificationsDrawer.vue b/frontend/src/components/alerts/EditEmailNotificationsDrawer.vue
index 301c52a65..af793f878 100644
--- a/frontend/src/components/alerts/EditEmailNotificationsDrawer.vue
+++ b/frontend/src/components/alerts/EditEmailNotificationsDrawer.vue
@@ -225,7 +225,7 @@ function closeDrawer() {
   <NeSideDrawer
     :is-shown="props.isShown"
     :title="t('alerts.edit_email_notifications')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @close="closeDrawer"
   >
     <div class="space-y-6">
diff --git a/frontend/src/components/alerts/EditTelegramNotificationsDrawer.vue b/frontend/src/components/alerts/EditTelegramNotificationsDrawer.vue
index 7b6ed7384..6a9c79de2 100644
--- a/frontend/src/components/alerts/EditTelegramNotificationsDrawer.vue
+++ b/frontend/src/components/alerts/EditTelegramNotificationsDrawer.vue
@@ -233,7 +233,7 @@ function closeDrawer() {
   <NeSideDrawer
     :is-shown="props.isShown"
     :title="t('alerts.configure_telegram_notifications')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @close="closeDrawer"
   >
     <div class="space-y-6">
diff --git a/frontend/src/components/alerts/EditWebhookNotificationsDrawer.vue b/frontend/src/components/alerts/EditWebhookNotificationsDrawer.vue
index 7cdd4ef4f..7e6bc5efd 100644
--- a/frontend/src/components/alerts/EditWebhookNotificationsDrawer.vue
+++ b/frontend/src/components/alerts/EditWebhookNotificationsDrawer.vue
@@ -215,7 +215,7 @@ function closeDrawer() {
   <NeSideDrawer
     :is-shown="props.isShown"
     :title="t('alerts.configure_webhook_notifications')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @close="closeDrawer"
   >
     <div class="space-y-6">
diff --git a/frontend/src/components/alerts/MuteAlertDrawer.vue b/frontend/src/components/alerts/MuteAlertDrawer.vue
index 4682ea8d3..791f296df 100644
--- a/frontend/src/components/alerts/MuteAlertDrawer.vue
+++ b/frontend/src/components/alerts/MuteAlertDrawer.vue
@@ -152,7 +152,7 @@ onBeforeUnmount(() => {
   <NeSideDrawer
     :is-shown="isShown"
     :title="t('alerts.mute_alert_title', { alertname: alert?.labels?.alertname ?? '' })"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/applications/AssignOrganizationDrawer.vue b/frontend/src/components/applications/AssignOrganizationDrawer.vue
index aff98fb24..5e64cdbcd 100644
--- a/frontend/src/components/applications/AssignOrganizationDrawer.vue
+++ b/frontend/src/components/applications/AssignOrganizationDrawer.vue
@@ -111,7 +111,7 @@ async function saveApplication() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="$t('applications.assign_organization')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/applications/SetNotesDrawer.vue b/frontend/src/components/applications/SetNotesDrawer.vue
index 34fa1e726..62bf7eb52 100644
--- a/frontend/src/components/applications/SetNotesDrawer.vue
+++ b/frontend/src/components/applications/SetNotesDrawer.vue
@@ -109,7 +109,7 @@ async function saveApplication() {
     :title="
       currentApplication?.notes ? $t('applications.edit_notes') : $t('applications.add_notes')
     "
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue b/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
index 8ae717d8a..c49363762 100644
--- a/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
+++ b/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
@@ -338,7 +338,7 @@ async function saveCustomer() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="currentCustomer ? $t('customers.edit_customer') : $t('customers.create_customer')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue b/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
index 2697976bd..4c4d67abf 100644
--- a/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
+++ b/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
@@ -320,7 +320,7 @@ async function saveDistributor() {
         ? $t('distributors.edit_distributor')
         : $t('distributors.create_distributor')
     "
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue b/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
index cb6eb49b3..98c6fe0b6 100644
--- a/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
+++ b/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
@@ -338,7 +338,7 @@ async function saveReseller() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="currentReseller ? $t('resellers.edit_reseller') : $t('resellers.create_reseller')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/shell/TopBar.vue b/frontend/src/components/shell/TopBar.vue
index 0e2cda7fe..80b66eb15 100644
--- a/frontend/src/components/shell/TopBar.vue
+++ b/frontend/src/components/shell/TopBar.vue
@@ -136,7 +136,11 @@ function openNotificationsDrawer() {
           <NeTooltip trigger-event="mouseenter focus" placement="bottom" class="flex">
             <template #trigger>
               <button type="button" :class="topBarButtonClasses" @click="themeStore.toggleTheme">
-                <span class="sr-only">{{ $t('shell.toggle_theme') }}</span>
+                <span class="sr-only">{{
+                  themeStore.isLight
+                    ? $t('shell.switch_to_dark_theme')
+                    : $t('shell.switch_to_light_theme')
+                }}</span>
                 <FontAwesomeIcon
                   :icon="themeStore.isLight ? faMoon : faSun"
                   class="h-6 w-6 shrink-0"
diff --git a/frontend/src/components/systems/CreateOrEditSystemDrawer.vue b/frontend/src/components/systems/CreateOrEditSystemDrawer.vue
index d9bd6044b..bf83cd0f1 100644
--- a/frontend/src/components/systems/CreateOrEditSystemDrawer.vue
+++ b/frontend/src/components/systems/CreateOrEditSystemDrawer.vue
@@ -312,7 +312,7 @@ function copySecretAndCloseDrawer() {
   <NeSideDrawer
     :is-shown="isShown"
     :title="currentSystem ? $t('systems.edit_system') : $t('systems.create_system')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @show="onShow"
     @close="closeDrawer"
   >
diff --git a/frontend/src/components/users/CreateOrEditUserDrawer.vue b/frontend/src/components/users/CreateOrEditUserDrawer.vue
index e5147d739..4292fa9bb 100644
--- a/frontend/src/components/users/CreateOrEditUserDrawer.vue
+++ b/frontend/src/components/users/CreateOrEditUserDrawer.vue
@@ -326,7 +326,7 @@ function getEmailInvalidMessage(): string {
   <NeSideDrawer
     :is-shown="isShown"
     :title="currentUser ? $t('users.edit_user') : $t('users.create_user')"
-    :close-aria-label="$t('common.shell.close_side_drawer')"
+    :close-aria-label="$t('shell.close_side_drawer')"
     @close="closeDrawer"
   >
     <form @submit.prevent>

From 833d75c84b0aacde36f64254e7e293a164855e94 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 26 Aug 2026 17:31:52 +0200
Subject: [PATCH 15/16] fix(ui): add logos in addons report

---
 frontend/src/components/addons/AddonLogo.vue  | 36 +++++++++++++++++++
 .../components/addons/AddonsReportPanel.vue   |  5 +--
 .../addons/report/AddonRenewalsCard.vue       |  2 +-
 .../addons/report/AddonsByAddonCard.vue       | 10 ++++--
 .../addons/report/AddonsByTierCard.vue        |  6 +++-
 5 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/addons/AddonLogo.vue

diff --git a/frontend/src/components/addons/AddonLogo.vue b/frontend/src/components/addons/AddonLogo.vue
new file mode 100644
index 000000000..3e930f793
--- /dev/null
+++ b/frontend/src/components/addons/AddonLogo.vue
@@ -0,0 +1,36 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+
+  The logo of an add-on, from its catalog id alone: the application logo for a
+  NethServer module, the product logo for a system-wide service. Views that
+  already hold the Addon can reach for the two logo components directly — this
+  exists for the ones holding nothing but the id, such as the report, whose
+  endpoints carry no catalog fields.
+
+  The id prefix is deliberately not read: an application name may itself contain
+  a hyphen, which is why applies_to exists. So the catalog is the only source,
+  and an id it does not know gets no logo rather than a guessed one.
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import ApplicationLogo from '@/components/applications/ApplicationLogo.vue'
+import SystemLogo from '@/components/systems/SystemLogo.vue'
+import { getAddonApplication } from '@/lib/addons/addons'
+import { useAddons } from '@/queries/addons/addons'
+
+const { addonId } = defineProps<{ addonId: string }>()
+
+// One shared query however many rows ask for it: the catalog arrives whole and
+// is cached for the page, so this is a lookup, not a request per add-on.
+const { state: catalog } = useAddons()
+
+const addon = computed(() => catalog.value.data?.find((item) => item.id === addonId))
+const application = computed(() => (addon.value ? getAddonApplication(addon.value) : ''))
+</script>
+
+<template>
+  <ApplicationLogo v-if="application" :app="application" />
+  <SystemLogo v-else-if="addon?.system_type" :system="addon.system_type" />
+</template>
diff --git a/frontend/src/components/addons/AddonsReportPanel.vue b/frontend/src/components/addons/AddonsReportPanel.vue
index a32884e9b..a3d6a14e7 100644
--- a/frontend/src/components/addons/AddonsReportPanel.vue
+++ b/frontend/src/components/addons/AddonsReportPanel.vue
@@ -8,8 +8,9 @@
   companies — so nothing here needs a permission check of its own.
 
   The totals, the trend, the renewal split and the per-add-on breakdown arrive
-  in one response — including the add-ons nobody has bought yet, so nothing here
-  needs the catalog; the two tables page and search on their own.
+  in one response — including the add-ons nobody has bought yet; the two tables
+  page and search on their own. The catalog is read for one thing only: the
+  report rows name an add-on by id, and its logo hangs off the catalog entry.
 -->
 
 <script setup lang="ts">
diff --git a/frontend/src/components/addons/report/AddonRenewalsCard.vue b/frontend/src/components/addons/report/AddonRenewalsCard.vue
index fc83d39b5..562db8efc 100644
--- a/frontend/src/components/addons/report/AddonRenewalsCard.vue
+++ b/frontend/src/components/addons/report/AddonRenewalsCard.vue
@@ -41,7 +41,7 @@ const rows = computed(() =>
 
 <template>
   <ReportCard :title="$t('addons.renewal_distribution')" :loading="loading">
-    <div class="flex flex-col gap-5">
+    <div class="flex flex-col gap-6">
       <div v-for="row in rows" :key="row.bucket" class="flex flex-col gap-2">
         <div class="flex items-baseline justify-between gap-4">
           <span class="font-medium text-gray-900 dark:text-gray-100">{{ row.label }}</span>
diff --git a/frontend/src/components/addons/report/AddonsByAddonCard.vue b/frontend/src/components/addons/report/AddonsByAddonCard.vue
index 212c6907b..996979b23 100644
--- a/frontend/src/components/addons/report/AddonsByAddonCard.vue
+++ b/frontend/src/components/addons/report/AddonsByAddonCard.vue
@@ -14,6 +14,7 @@
 import { computed } from 'vue'
 import { getStatusSegments, type AddonReportByType } from '@/lib/addons/addonsReport'
 import { ADDON_STATUS_STYLE } from '@/lib/addons/systemAddons'
+import AddonLogo from '../AddonLogo.vue'
 import ReportCard from './ReportCard.vue'
 
 const { byAddon, loading } = defineProps<{
@@ -32,10 +33,13 @@ const rows = computed(() =>
 
 <template>
   <ReportCard :title="$t('addons.by_addon')" :loading="loading">
-    <div class="flex flex-col gap-5">
+    <div class="flex flex-col gap-6">
       <div v-for="row in rows" :key="row.entitlement" class="flex flex-col gap-2">
-        <div class="flex items-baseline justify-between gap-4">
-          <span class="font-medium text-gray-900 dark:text-gray-100">{{ row.display_name }}</span>
+        <div class="flex items-center justify-between gap-4">
+          <div class="flex items-center gap-3">
+            <AddonLogo :addon-id="row.entitlement" />
+            <span class="font-medium text-gray-900 dark:text-gray-100">{{ row.display_name }}</span>
+          </div>
           <span
             :class="[
               'shrink-0 font-medium',
diff --git a/frontend/src/components/addons/report/AddonsByTierCard.vue b/frontend/src/components/addons/report/AddonsByTierCard.vue
index da70137e8..fa854b726 100644
--- a/frontend/src/components/addons/report/AddonsByTierCard.vue
+++ b/frontend/src/components/addons/report/AddonsByTierCard.vue
@@ -25,6 +25,7 @@ import { computed } from 'vue'
 import { ADDONS_REPORT_TIERS_TABLE_ID } from '@/lib/addons/addonsReport'
 import { PAGE_SIZE_OPTIONS, savePageSizeToStorage } from '@/lib/tablePageSize'
 import { useAddonReportTiers } from '@/queries/addons/addonsReport'
+import AddonLogo from '../AddonLogo.vue'
 import ReportCard from './ReportCard.vue'
 
 const { state: tiers, pageNum, pageSize, textFilter } = useAddonReportTiers()
@@ -69,7 +70,10 @@ const loading = computed(() => tiers.value.status === 'pending')
         <NeTableBody>
           <NeTableRow v-for="row in rows" :key="`${row.entitlement} ${row.label}`">
             <NeTableCell :data-label="$t('addons.addon')">
-              {{ row.display_name || row.entitlement }}
+              <div class="flex items-center gap-2">
+                <AddonLogo :addon-id="row.entitlement" />
+                <span>{{ row.display_name || row.entitlement }}</span>
+              </div>
             </NeTableCell>
             <NeTableCell :data-label="$t('addons.tier')">{{ row.label }}</NeTableCell>
             <NeTableCell :data-label="$t('addons.count')">{{ row.count }}</NeTableCell>

From 00e54c5b3a84a0c1782593ed0414339f214d60b9 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Wed, 26 Aug 2026 18:14:05 +0200
Subject: [PATCH 16/16] fix(ui): fix csv/pdf export

---
 .../src/lib/organizations/customers.test.ts   | 145 +++++++++++++
 frontend/src/lib/organizations/customers.ts   |  27 +++
 .../lib/organizations/distributors.test.ts    |  93 +++++++++
 .../src/lib/organizations/distributors.ts     |   9 +
 .../src/lib/organizations/resellers.test.ts   | 137 +++++++++++++
 frontend/src/lib/organizations/resellers.ts   |  20 ++
 frontend/src/lib/systems/systems.test.ts      | 192 ++++++++++++++++++
 frontend/src/lib/systems/systems.ts           |   2 -
 frontend/src/views/CustomersView.vue          |   5 +
 frontend/src/views/DistributorsView.vue       |   8 +-
 frontend/src/views/ResellersView.vue          |   3 +
 11 files changed, 636 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/lib/organizations/customers.test.ts
 create mode 100644 frontend/src/lib/organizations/distributors.test.ts
 create mode 100644 frontend/src/lib/organizations/resellers.test.ts
 create mode 100644 frontend/src/lib/systems/systems.test.ts

diff --git a/frontend/src/lib/organizations/customers.test.ts b/frontend/src/lib/organizations/customers.test.ts
new file mode 100644
index 000000000..3fb5dbe5c
--- /dev/null
+++ b/frontend/src/lib/organizations/customers.test.ts
@@ -0,0 +1,145 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getQueryStringParams, getQueryStringParamsForExport } from './customers'
+import { expect, it, describe } from 'vitest'
+
+// the builders return a query string; parse it back so the assertions don't
+// depend on the order the parameters happen to be appended in
+const parse = (queryString: string) => new URLSearchParams(queryString)
+
+describe('customers getQueryStringParamsForExport', () => {
+  it('sends every filter the list sends', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        'acme',
+        ['enabled', 'suspended'],
+        ['kyfy0tlnlk3l', 'obhdyclbfx4t'],
+        ['org_abc123', 'org_def456'],
+        true,
+        'creator_name',
+        true,
+      ),
+    )
+
+    expect(params.get('format')).toBe('csv')
+    expect(params.get('search')).toBe('acme')
+    expect(params.getAll('status')).toEqual(['enabled', 'suspended'])
+    expect(params.getAll('created_by')).toEqual(['kyfy0tlnlk3l', 'obhdyclbfx4t'])
+    expect(params.getAll('organization_id')).toEqual(['org_abc123', 'org_def456'])
+    expect(params.get('include_hierarchy')).toBe('true')
+    expect(params.get('sort_by')).toBe('creator_name')
+    expect(params.get('sort_direction')).toBe('desc')
+  })
+
+  it('keeps the sort parameters alongside a non-empty status filter', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'pdf',
+        undefined,
+        ['deleted'],
+        undefined,
+        undefined,
+        undefined,
+        'name',
+        false,
+      ),
+    )
+
+    expect(params.getAll('status')).toEqual(['deleted'])
+    expect(params.get('sort_by')).toBe('name')
+    expect(params.get('sort_direction')).toBe('asc')
+  })
+
+  it('omits include_hierarchy unless the flag is set', () => {
+    const withoutFlag = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        undefined,
+        undefined,
+        undefined,
+        ['org_abc123'],
+        false,
+        undefined,
+        undefined,
+      ),
+    )
+
+    expect(withoutFlag.getAll('organization_id')).toEqual(['org_abc123'])
+    expect(withoutFlag.has('include_hierarchy')).toBe(false)
+  })
+
+  it('omits search for undefined and whitespace-only text filters', () => {
+    const searchFor = (textFilter: string | undefined) =>
+      parse(
+        getQueryStringParamsForExport(
+          'csv',
+          textFilter,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+        ),
+      ).has('search')
+
+    expect(searchFor(undefined)).toBe(false)
+    expect(searchFor('   ')).toBe(false)
+    expect(searchFor('acme')).toBe(true)
+  })
+
+  it('omits the sort parameters when they are not given', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+      ),
+    )
+
+    expect(params.has('sort_by')).toBe(false)
+    expect(params.has('sort_direction')).toBe(false)
+  })
+
+  it('carries every key the list query carries, apart from pagination', () => {
+    const list = parse(
+      getQueryStringParams(
+        1,
+        20,
+        'acme',
+        ['enabled'],
+        ['kyfy0tlnlk3l'],
+        ['org_abc123'],
+        true,
+        'name',
+        false,
+      ),
+    )
+    const exported = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        'acme',
+        ['enabled'],
+        ['kyfy0tlnlk3l'],
+        ['org_abc123'],
+        true,
+        'name',
+        false,
+      ),
+    )
+
+    for (const key of new Set(list.keys())) {
+      if (key === 'page' || key === 'page_size') {
+        continue
+      }
+      expect(exported.getAll(key), `export is missing ${key}`).toEqual(list.getAll(key))
+    }
+  })
+})
diff --git a/frontend/src/lib/organizations/customers.ts b/frontend/src/lib/organizations/customers.ts
index 8708a1062..68912be15 100644
--- a/frontend/src/lib/organizations/customers.ts
+++ b/frontend/src/lib/organizations/customers.ts
@@ -244,6 +244,9 @@ export const getQueryStringParamsForExport = (
   format: string,
   textFilter: string | undefined,
   statusFilter: CustomerStatus[] | undefined,
+  createdByFilter: string[] | undefined,
+  organizationFilter: string[] | undefined,
+  includeHierarchy: boolean | undefined,
   sortBy: string | undefined,
   sortDescending: boolean | undefined,
 ) => {
@@ -261,6 +264,24 @@ export const getQueryStringParamsForExport = (
     })
   }
 
+  if (createdByFilter) {
+    createdByFilter.forEach((userId) => {
+      searchParams.append('created_by', userId)
+    })
+  }
+
+  // Parent company filter: same exact match as the list query, widened to the
+  // whole subtree only when the hierarchy entry point set includeHierarchy.
+  if (organizationFilter) {
+    organizationFilter.forEach((organizationId) => {
+      searchParams.append('organization_id', organizationId)
+    })
+  }
+
+  if (includeHierarchy) {
+    searchParams.append('include_hierarchy', 'true')
+  }
+
   if (sortBy) {
     searchParams.append('sort_by', sortBy)
   }
@@ -276,6 +297,9 @@ export const getExport = (
   format: 'csv' | 'pdf',
   textFilter: string | undefined = undefined,
   statusFilter: CustomerStatus[] | undefined = undefined,
+  createdByFilter: string[] | undefined = undefined,
+  organizationFilter: string[] | undefined = undefined,
+  includeHierarchy: boolean | undefined = undefined,
   sortBy: string | undefined = undefined,
   sortDescending: boolean | undefined = undefined,
 ) => {
@@ -284,6 +308,9 @@ export const getExport = (
     format,
     textFilter,
     statusFilter,
+    createdByFilter,
+    organizationFilter,
+    includeHierarchy,
     sortBy,
     sortDescending,
   )
diff --git a/frontend/src/lib/organizations/distributors.test.ts b/frontend/src/lib/organizations/distributors.test.ts
new file mode 100644
index 000000000..998e6a917
--- /dev/null
+++ b/frontend/src/lib/organizations/distributors.test.ts
@@ -0,0 +1,93 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getQueryStringParams, getQueryStringParamsForExport } from './distributors'
+import { expect, it, describe } from 'vitest'
+
+// the builders return a query string; parse it back so the assertions don't
+// depend on the order the parameters happen to be appended in
+const parse = (queryString: string) => new URLSearchParams(queryString)
+
+describe('distributors getQueryStringParamsForExport', () => {
+  it('sends every filter the list sends', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        'acme',
+        ['enabled', 'suspended'],
+        ['kyfy0tlnlk3l', 'obhdyclbfx4t'],
+        'creator_name',
+        true,
+      ),
+    )
+
+    expect(params.get('format')).toBe('csv')
+    expect(params.get('search')).toBe('acme')
+    expect(params.getAll('status')).toEqual(['enabled', 'suspended'])
+    expect(params.getAll('created_by')).toEqual(['kyfy0tlnlk3l', 'obhdyclbfx4t'])
+    expect(params.get('sort_by')).toBe('creator_name')
+    expect(params.get('sort_direction')).toBe('desc')
+  })
+
+  it('keeps the sort parameters alongside a non-empty status filter', () => {
+    const params = parse(
+      getQueryStringParamsForExport('pdf', undefined, ['deleted'], undefined, 'name', false),
+    )
+
+    expect(params.getAll('status')).toEqual(['deleted'])
+    expect(params.get('sort_by')).toBe('name')
+    expect(params.get('sort_direction')).toBe('asc')
+  })
+
+  it('sends no organization or hierarchy filter: distributors are the top tier', () => {
+    const params = parse(
+      getQueryStringParamsForExport('csv', 'acme', ['enabled'], ['kyfy0tlnlk3l'], 'name', false),
+    )
+
+    expect(params.has('organization_id')).toBe(false)
+    expect(params.has('include_hierarchy')).toBe(false)
+  })
+
+  it('omits search for undefined and whitespace-only text filters', () => {
+    const searchFor = (textFilter: string | undefined) =>
+      parse(
+        getQueryStringParamsForExport(
+          'csv',
+          textFilter,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+        ),
+      ).has('search')
+
+    expect(searchFor(undefined)).toBe(false)
+    expect(searchFor('   ')).toBe(false)
+    expect(searchFor('acme')).toBe(true)
+  })
+
+  it('omits the sort parameters when they are not given', () => {
+    const params = parse(
+      getQueryStringParamsForExport('csv', undefined, undefined, undefined, undefined, undefined),
+    )
+
+    expect(params.has('sort_by')).toBe(false)
+    expect(params.has('sort_direction')).toBe(false)
+  })
+
+  it('carries every key the list query carries, apart from pagination', () => {
+    const list = parse(
+      getQueryStringParams(1, 20, 'acme', ['enabled'], ['kyfy0tlnlk3l'], 'name', false),
+    )
+    const exported = parse(
+      getQueryStringParamsForExport('csv', 'acme', ['enabled'], ['kyfy0tlnlk3l'], 'name', false),
+    )
+
+    for (const key of new Set(list.keys())) {
+      if (key === 'page' || key === 'page_size') {
+        continue
+      }
+      expect(exported.getAll(key), `export is missing ${key}`).toEqual(list.getAll(key))
+    }
+  })
+})
diff --git a/frontend/src/lib/organizations/distributors.ts b/frontend/src/lib/organizations/distributors.ts
index 1568f65ef..dcdf1b366 100644
--- a/frontend/src/lib/organizations/distributors.ts
+++ b/frontend/src/lib/organizations/distributors.ts
@@ -247,6 +247,7 @@ export const getQueryStringParamsForExport = (
   format: string,
   textFilter: string | undefined,
   statusFilter: DistributorStatus[] | undefined,
+  createdByFilter: string[] | undefined,
   sortBy: string | undefined,
   sortDescending: boolean | undefined,
 ) => {
@@ -264,6 +265,12 @@ export const getQueryStringParamsForExport = (
     })
   }
 
+  if (createdByFilter) {
+    createdByFilter.forEach((userId) => {
+      searchParams.append('created_by', userId)
+    })
+  }
+
   if (sortBy) {
     searchParams.append('sort_by', sortBy)
   }
@@ -279,6 +286,7 @@ export const getExport = (
   format: 'csv' | 'pdf',
   textFilter: string | undefined = undefined,
   statusFilter: DistributorStatus[] | undefined = undefined,
+  createdByFilter: string[] | undefined = undefined,
   sortBy: string | undefined = undefined,
   sortDescending: boolean | undefined = undefined,
 ) => {
@@ -287,6 +295,7 @@ export const getExport = (
     format,
     textFilter,
     statusFilter,
+    createdByFilter,
     sortBy,
     sortDescending,
   )
diff --git a/frontend/src/lib/organizations/resellers.test.ts b/frontend/src/lib/organizations/resellers.test.ts
new file mode 100644
index 000000000..34b1c60b4
--- /dev/null
+++ b/frontend/src/lib/organizations/resellers.test.ts
@@ -0,0 +1,137 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getQueryStringParams, getQueryStringParamsForExport } from './resellers'
+import { expect, it, describe } from 'vitest'
+
+// the builders return a query string; parse it back so the assertions don't
+// depend on the order the parameters happen to be appended in
+const parse = (queryString: string) => new URLSearchParams(queryString)
+
+describe('resellers getQueryStringParamsForExport', () => {
+  it('sends every filter the list sends', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        'acme',
+        ['enabled', 'suspended'],
+        ['kyfy0tlnlk3l', 'obhdyclbfx4t'],
+        ['org_abc123', 'org_def456'],
+        'creator_name',
+        true,
+      ),
+    )
+
+    expect(params.get('format')).toBe('csv')
+    expect(params.get('search')).toBe('acme')
+    expect(params.getAll('status')).toEqual(['enabled', 'suspended'])
+    expect(params.getAll('created_by')).toEqual(['kyfy0tlnlk3l', 'obhdyclbfx4t'])
+    expect(params.getAll('organization_id')).toEqual(['org_abc123', 'org_def456'])
+    expect(params.get('sort_by')).toBe('creator_name')
+    expect(params.get('sort_direction')).toBe('desc')
+  })
+
+  it('keeps the sort parameters alongside a non-empty status filter', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'pdf',
+        undefined,
+        ['deleted'],
+        undefined,
+        undefined,
+        'name',
+        false,
+      ),
+    )
+
+    expect(params.getAll('status')).toEqual(['deleted'])
+    expect(params.get('sort_by')).toBe('name')
+    expect(params.get('sort_direction')).toBe('asc')
+  })
+
+  it('never sends include_hierarchy: the parent company filter is an exact match', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        undefined,
+        undefined,
+        undefined,
+        ['org_abc123'],
+        undefined,
+        undefined,
+      ),
+    )
+
+    expect(params.getAll('organization_id')).toEqual(['org_abc123'])
+    expect(params.has('include_hierarchy')).toBe(false)
+  })
+
+  it('omits search for undefined and whitespace-only text filters', () => {
+    const searchFor = (textFilter: string | undefined) =>
+      parse(
+        getQueryStringParamsForExport(
+          'csv',
+          textFilter,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+        ),
+      ).has('search')
+
+    expect(searchFor(undefined)).toBe(false)
+    expect(searchFor('   ')).toBe(false)
+    expect(searchFor('acme')).toBe(true)
+  })
+
+  it('omits the sort parameters when they are not given', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+      ),
+    )
+
+    expect(params.has('sort_by')).toBe(false)
+    expect(params.has('sort_direction')).toBe(false)
+  })
+
+  it('carries every key the list query carries, apart from pagination', () => {
+    const list = parse(
+      getQueryStringParams(
+        1,
+        20,
+        'acme',
+        ['enabled'],
+        ['kyfy0tlnlk3l'],
+        ['org_abc123'],
+        'name',
+        false,
+      ),
+    )
+    const exported = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        'acme',
+        ['enabled'],
+        ['kyfy0tlnlk3l'],
+        ['org_abc123'],
+        'name',
+        false,
+      ),
+    )
+
+    for (const key of new Set(list.keys())) {
+      if (key === 'page' || key === 'page_size') {
+        continue
+      }
+      expect(exported.getAll(key), `export is missing ${key}`).toEqual(list.getAll(key))
+    }
+  })
+})
diff --git a/frontend/src/lib/organizations/resellers.ts b/frontend/src/lib/organizations/resellers.ts
index 87a44f414..41bc3c9c1 100644
--- a/frontend/src/lib/organizations/resellers.ts
+++ b/frontend/src/lib/organizations/resellers.ts
@@ -248,6 +248,8 @@ export const getQueryStringParamsForExport = (
   format: string,
   textFilter: string | undefined,
   statusFilter: ResellerStatus[] | undefined,
+  createdByFilter: string[] | undefined,
+  organizationFilter: string[] | undefined,
   sortBy: string | undefined,
   sortDescending: boolean | undefined,
 ) => {
@@ -265,6 +267,20 @@ export const getQueryStringParamsForExport = (
     })
   }
 
+  if (createdByFilter) {
+    createdByFilter.forEach((userId) => {
+      searchParams.append('created_by', userId)
+    })
+  }
+
+  // Parent company filter: same exact match as the list query, so the export of
+  // a distributor's resellers never pulls in the resellers of its descendants.
+  if (organizationFilter) {
+    organizationFilter.forEach((organizationId) => {
+      searchParams.append('organization_id', organizationId)
+    })
+  }
+
   if (sortBy) {
     searchParams.append('sort_by', sortBy)
   }
@@ -280,6 +296,8 @@ export const getExport = (
   format: 'csv' | 'pdf',
   textFilter: string | undefined = undefined,
   statusFilter: ResellerStatus[] | undefined = undefined,
+  createdByFilter: string[] | undefined = undefined,
+  organizationFilter: string[] | undefined = undefined,
   sortBy: string | undefined = undefined,
   sortDescending: boolean | undefined = undefined,
 ) => {
@@ -288,6 +306,8 @@ export const getExport = (
     format,
     textFilter,
     statusFilter,
+    createdByFilter,
+    organizationFilter,
     sortBy,
     sortDescending,
   )
diff --git a/frontend/src/lib/systems/systems.test.ts b/frontend/src/lib/systems/systems.test.ts
new file mode 100644
index 000000000..bba2d4f23
--- /dev/null
+++ b/frontend/src/lib/systems/systems.test.ts
@@ -0,0 +1,192 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getQueryStringParams, getQueryStringParamsForExport } from './systems'
+import { expect, it, describe } from 'vitest'
+
+// the builders return a query string; parse it back so the assertions don't
+// depend on the order the parameters happen to be appended in
+const parse = (queryString: string) => new URLSearchParams(queryString)
+
+describe('systems getQueryStringParamsForExport', () => {
+  it('sends every filter the list sends', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        undefined,
+        'backup',
+        ['nsec', 'ns8'],
+        ['53h5zxpwu4vc', 'lbswt1rxdhbz'],
+        ['nsec:8.0', 'ns8:1.2.3'],
+        ['active', 'inactive'],
+        ['org_abc123', 'org_def456'],
+        true,
+        'name',
+        true,
+      ),
+    )
+
+    expect(params.get('format')).toBe('csv')
+    expect(params.get('search')).toBe('backup')
+    expect(params.getAll('type')).toEqual(['nsec', 'ns8'])
+    expect(params.getAll('created_by')).toEqual(['53h5zxpwu4vc', 'lbswt1rxdhbz'])
+    expect(params.getAll('version')).toEqual(['nsec:8.0', 'ns8:1.2.3'])
+    expect(params.getAll('status')).toEqual(['active', 'inactive'])
+    expect(params.getAll('organization_id')).toEqual(['org_abc123', 'org_def456'])
+    expect(params.get('include_hierarchy')).toBe('true')
+    expect(params.get('sort_by')).toBe('name')
+    expect(params.get('sort_direction')).toBe('desc')
+  })
+
+  // regression: the status block used to return early, so a sorted export was
+  // always served in the backend's default order instead of the user's
+  it('keeps the sort parameters alongside a non-empty status filter', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'pdf',
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        ['active'],
+        undefined,
+        undefined,
+        'name',
+        false,
+      ),
+    )
+
+    expect(params.getAll('status')).toEqual(['active'])
+    expect(params.get('sort_by')).toBe('name')
+    expect(params.get('sort_direction')).toBe('asc')
+  })
+
+  // SystemsView always passes an array, so an empty status filter must not
+  // swallow the sort parameters either
+  it('keeps the sort parameters alongside an empty status filter', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        [],
+        undefined,
+        undefined,
+        'created_at',
+        true,
+      ),
+    )
+
+    expect(params.has('status')).toBe(false)
+    expect(params.get('sort_by')).toBe('created_at')
+    expect(params.get('sort_direction')).toBe('desc')
+  })
+
+  it('sends the system key for a single-system export', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'pdf',
+        'NETH-DD09-3DB4',
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+      ),
+    )
+
+    expect(params.get('system_key')).toBe('NETH-DD09-3DB4')
+  })
+
+  it('omits include_hierarchy unless the flag is set', () => {
+    const params = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        ['org_abc123'],
+        false,
+        undefined,
+        undefined,
+      ),
+    )
+
+    expect(params.getAll('organization_id')).toEqual(['org_abc123'])
+    expect(params.has('include_hierarchy')).toBe(false)
+  })
+
+  it('omits search for undefined and whitespace-only text filters', () => {
+    const searchFor = (textFilter: string | undefined) =>
+      parse(
+        getQueryStringParamsForExport(
+          'csv',
+          undefined,
+          textFilter,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+        ),
+      ).has('search')
+
+    expect(searchFor(undefined)).toBe(false)
+    expect(searchFor('   ')).toBe(false)
+    expect(searchFor('backup')).toBe(true)
+  })
+
+  it('carries every key the list query carries, apart from pagination', () => {
+    const list = parse(
+      getQueryStringParams(
+        1,
+        50,
+        'backup',
+        ['nsec'],
+        ['53h5zxpwu4vc'],
+        ['nsec:8.0'],
+        ['active'],
+        ['org_abc123'],
+        true,
+        'name',
+        false,
+      ),
+    )
+    const exported = parse(
+      getQueryStringParamsForExport(
+        'csv',
+        undefined,
+        'backup',
+        ['nsec'],
+        ['53h5zxpwu4vc'],
+        ['nsec:8.0'],
+        ['active'],
+        ['org_abc123'],
+        true,
+        'name',
+        false,
+      ),
+    )
+
+    for (const key of new Set(list.keys())) {
+      if (key === 'page' || key === 'page_size') {
+        continue
+      }
+      expect(exported.getAll(key), `export is missing ${key}`).toEqual(list.getAll(key))
+    }
+  })
+})
diff --git a/frontend/src/lib/systems/systems.ts b/frontend/src/lib/systems/systems.ts
index 4e971961e..36e2e75c8 100644
--- a/frontend/src/lib/systems/systems.ts
+++ b/frontend/src/lib/systems/systems.ts
@@ -206,7 +206,6 @@ export const getQueryStringParamsForExport = (
     })
   }
 
-  // appended before the statusFilter block because that block returns early
   if (organizationFilter) {
     organizationFilter.forEach((orgId) => {
       searchParams.append('organization_id', orgId)
@@ -221,7 +220,6 @@ export const getQueryStringParamsForExport = (
     statusFilter.forEach((status) => {
       searchParams.append('status', status)
     })
-    return searchParams.toString()
   }
 
   if (sortBy) {
diff --git a/frontend/src/views/CustomersView.vue b/frontend/src/views/CustomersView.vue
index 5b8abe7cf..ccef3ce22 100644
--- a/frontend/src/views/CustomersView.vue
+++ b/frontend/src/views/CustomersView.vue
@@ -38,7 +38,9 @@ const {
   state,
   debouncedTextFilter,
   statusFilter,
+  createdByFilter,
   organizationFilter,
+  includeHierarchy,
   sortBy,
   sortDescending,
   applyHierarchyFilter,
@@ -102,6 +104,9 @@ async function exportCustomers(format: 'pdf' | 'csv') {
       format,
       debouncedTextFilter.value,
       statusFilter.value.map((o) => o.id) as CustomerStatus[],
+      createdByFilter.value.map((o) => o.id),
+      organizationFilter.value.map((o) => o.id),
+      includeHierarchy.value,
       sortBy.value,
       sortDescending.value,
     )
diff --git a/frontend/src/views/DistributorsView.vue b/frontend/src/views/DistributorsView.vue
index 476fc97c6..89748e846 100644
--- a/frontend/src/views/DistributorsView.vue
+++ b/frontend/src/views/DistributorsView.vue
@@ -31,7 +31,8 @@ import {
 import { downloadFile } from '@/lib/common'
 
 const { t } = useI18n()
-const { state, debouncedTextFilter, statusFilter, sortBy, sortDescending } = useDistributors()
+const { state, debouncedTextFilter, statusFilter, createdByFilter, sortBy, sortDescending } =
+  useDistributors()
 
 const isShownCreateDistributorDrawer = ref(false)
 const isShownImportDistributorsModal = ref(false)
@@ -53,14 +54,14 @@ function getBulkActionsMenuItems() {
       label: t('distributors.export_distributors_to_pdf'),
       icon: faFilePdf,
       action: () => exportDistributors('pdf'),
-      disabled: !state.value.data?.distributors,
+      disabled: !state.value.data?.distributors.length,
     },
     {
       id: 'exportFilteredToCsv',
       label: t('distributors.export_distributors_to_csv'),
       icon: faFileCsv,
       action: () => exportDistributors('csv'),
-      disabled: !state.value.data?.distributors,
+      disabled: !state.value.data?.distributors.length,
     },
   ]
 }
@@ -71,6 +72,7 @@ async function exportDistributors(format: 'pdf' | 'csv') {
       format,
       debouncedTextFilter.value,
       statusFilter.value.map((o) => o.id) as DistributorStatus[],
+      createdByFilter.value.map((o) => o.id),
       sortBy.value,
       sortDescending.value,
     )
diff --git a/frontend/src/views/ResellersView.vue b/frontend/src/views/ResellersView.vue
index 3973a2f31..ea535321c 100644
--- a/frontend/src/views/ResellersView.vue
+++ b/frontend/src/views/ResellersView.vue
@@ -38,6 +38,7 @@ const {
   state,
   debouncedTextFilter,
   statusFilter,
+  createdByFilter,
   organizationFilter,
   sortBy,
   sortDescending,
@@ -93,6 +94,8 @@ async function exportResellers(format: 'pdf' | 'csv') {
       format,
       debouncedTextFilter.value,
       statusFilter.value.map((o) => o.id) as ResellerStatus[],
+      createdByFilter.value.map((o) => o.id),
+      organizationFilter.value.map((o) => o.id),
       sortBy.value,
       sortDescending.value,
     )